ナビメニュー100連発！CSSで表現できるコピペ可能なHTMLスニペットまとめ - PhotoshopVIP

2017/01/05 158 users CSS コピペ HTML ドロップダウン モバイル端末

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。 今回は HTML と CSS、わずかな JavaScript で実装できるさまざまな ナビゲーションメニュー用コードスニペット をまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフル... 続きを読む

CSSのみで制作する、ナビゲーションメニュー用アニメーションエフェクト10個まとめ - PhotoshopVIP

2015/11/26 113 users PhotoshopVIP CSS ホバーエフェクト 以下 人気

ウェブサイトに欠かせない、ナビゲーションメニューを制作するときに、ちょっとした動きをつけた素敵なホバーエフェクトをまとめてご紹介します。 どれもCSSのみで実装されており、最近のデザイントレンドとして人気のアニメーションを、うまく取り入れたデザインコンセプトとなっています。今後のデザイン制作に活用私てみてはいかがでしょう。 詳細は以下から。 CSSで作成する、ナビゲーションメニュー用アニメーション... 続きを読む

新型ナビメニュー「ポップアウト」の実装チュートリアル＆参考Webサイトまとめ - Photoshop VIP

2014/08/06 120 users VIP ポップアウト チュートリアル ゴーストボタン 参考

新しいデザイントレンド「ゴーストボタン」同様に、ナビゲーションメニューに面白いアニメーション効果、「ポップアウト」を加えたWebサイトを見かけるようになっています。 今回はそんな新型ナビメニュー「ポップアウト」の実装チュートリアルと、参考にしたいWebサイトデザインをまとめています。今後のデザイン制作、プロジェクトに活用してみてはいかがでしょう。 チュートリアルはどれもデモサイトが用意されており、... 続きを読む

モバイルサイトのナビゲーションメニューは画面下に置くべき | Webクリエイターボックス

2014/02/19 204 users モバイルサイト モバイルユーザビリティ モバイルブラウザー

スマートフォンを使ってWebサイトを閲覧する人、どんどん増えてきています。モバイルブラウザーのシェアを見ても、そのユーザー数は無視できないものとなっています。サイトによってはデスクトップで閲覧する層より多いところもあるかもしれませんね。私がWebサイトの制作依頼を受けた際、モバイル対応は必須としてきましたが、モバイルユーザビリティについて再考してみたので、今回はナビゲーションメニューについて簡単に... 続きを読む

有名サイトのUIデザインを再現、無料PSDデザイン素材配布サイトPhotoshopVIP |

2013/06/25 122 users 再現 UIデザイン 有名サイト Facebook ブログサイト

多くのブログサイトでも既出なのですが、facebookやAppleなど有名サイトのUIデザインを完全再現し、無料PSDデザイン素材として配布しているサイトPopular UIsが参考になったので、今回はあらためてご紹介します。 ナビゲーションメニューやコンテンツ部分など、パーツごとにフォルダ分けされており、参考にしたいUIデザインもすぐに編集可能ですよ。 詳細は以下から。 有名サイトのUIデザイン... 続きを読む

WordPressのカスタムメニュー（wp_nav_menu）を使って、サブタイトル付きのナビゲーションを実装する - かちびと.net

2012/04/16 108 users カスタムメニュー ケーション ナビゲー コーポレートサイト

ナビゲーションメニューに、よくリンクの 詳細を短文で含めているのを見かけます。 コーポレートサイトなんかでは定番のナビ ゲーションですが、これをWordPressで、 テキストで実現しよう、という方法です。 カスタムメニューで管理できるようにし ます。 カスタムメニューでナビゲーションも、その詳細文、サブタイトルみたいなのも管理できたら楽ですよね、という事で方法をご紹介します。 説明付きのナビゲー... 続きを読む

もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ | Webクリエイターボックス

2011/10/18 817 users Webクリエイターボックス ナビゲーシ コツ ユーザー 目次

どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ナビゲーシ... 続きを読む

jQueryでやる！ブログで使えそうな楽しいナビメニュー45*ホームページを作る人のネタ帳

2010/01/27 411 users jQuery noupe ネタ帳 支持 エントリー

色々とjQueryのサンプルやプラグインが掲載されていて、眺めてるだけで楽しくなるエントリー。 ナビゲーションメニューで悩んだ時に使えそうです。 45 jQuery Navigation Plugins and Tutorials - Noupe さて、いまや多くの人たちから支持を得ているjQueryで、もっと楽しいブログにしてみるのもいいかもしれない。 jQueryは何もWEBサイトだけのもので... 続きを読む

ナビゲーションメニューのデザイン総まとめ - DesignWalker

2008/12/09 339 users ウェブデザイン サンプル デザイン ところあと

2008年も残すところあとわずかですね。 今回は、今年のウェブデザイン総まとめ第一段といたしまして、ナビゲーションメニューのデザインをお送りします。 ウェブデザインには、欠かせないナビゲーションメニュー。とてもきれいなサンプルがいっぱいです。 45 Photoshop Tutorials for Better Navigation より良いナビゲーションデザインを作る為のPhotoshopチュート... 続きを読む

ちょっと小粋なCSSのナビゲーションメニュー「ADxMenu」 - GIGAZINE

2006/07/23 406 users GIGAZINE CSS

WindowsXPやOfficeXP風のメニュー、シンプルなメニュー、ミニタブ型、横に展開するタイプなど、いろいろな幅広い応用が可能です。 例とコードのダウンロードは以下から。 ダウンロードや設置方法は以下のページから。 aplus :: ADxMenu http://www.aplus.co.yu/adxmenu/intro/ 実際の例は以下にあります。 http://www.aplus.co.... 続きを読む