最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ
Post on:2016年10月20日
sponsors
去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。
Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。
各ページでコードやファイルもダウンロードでき、すぐに利用できます。
Stripe.comで採用されているような、各アイテムのドロップダウンがモーフィングで変化する新しいタイプのナビゲーション。コンテンツに合わせて、デザインを変更できます。
小さい画面ではデザインの異なる各アイテムがきれいにまとめられています。
ページを下にスクロールすると、ヘッダが自動で非表示になります。上にスクロールすると、すぐに表示されます。
デスクトップではヘッダが表示されていても気になりませんが、スマホなどの小さい画面では有益なテクニックですね。
Simple Responsive Tabs With JavaScript & CSS
デモページ
レスポンシブ対応のシンプルなタブ型ナビゲーション。
操作は快適で、小さい画面ではアイコンを活用したタブデザインに変更されます。
Google Nexus Website Menu
デモページ
Nexusのサイトで使用されていたサイドバーメニューがスライドアウトするタイプのナビゲーション。最初はアイコンだけが表示され、次のアクションでアイテムが表示されます。ホバー・クリック、そしてタップをうまく組み合わせた操作です。
プッシュ型のメニューを多階層、重ねることができるナビゲーション。右・左のスワイプ操作にも対応しており、スマホで快適な操作を実現しています。
左右どちらにもプッシュ型のメニューを表示できます。実装はシンプルで、カスタマイズ性にも優れています。
4 Sweet and Responsive Navigation Menus
デモページ
4つの異なるデザインが用意されたレスポンシブ対応のナビゲーション。小さい画面では各アイテムが積み重なって表示されます。
Secondary Sliding Navigation
デモページ
第2レベルのアイテムをスライドで表示するナビゲーション。
サイトの構造で深い階層を持つコンテンツが少ない時に、ぴったりのアイデアです。
Responsive Sidebar Navigation
デモページ
サイトの構造で深い階層を持つコンテンツが多い時には、このナビゲーションが助けてくれます。デスクトップ時はもちろん、スマホ時でも複数の多階層コンテンツをナビゲートできます。
多階層コンテンツを一覧できるメガドロップ型のナビゲーション。
ドロップダウンのデザインは、リスト、画像、アイコンが用意されています。キャプチャのリストでは、アローから更に下の階層も表示されます。
ナビゲーションを3Dのアニメーションで表示する、インパクト大のエフェクトです。仕組みは、ナビゲーションが折り畳まれており、それが伸びて表示されるイメージです。
ナビゲーションがダイナミックにスライドして、そのアニメーションと同様にページが遷移します。コンテンツのスクロール位置に限らず、どこでも表示することができます。
sponsors
