最近のレスポンシブ対応サイトで見かけるナビゲーションのアイデア・実装方法のまとめ

去年ぐらいはレスポンシブ対応のナビゲーションというとハンバーガーメニューばかりでしたが、最近ではスクリーンサイズに合わせるだけでなく、コンテンツや階層構造に合わせたナビゲーションが増えてきました。

Webページやスマホページのレスポンシブ対応サイトで最近よく見かけるナビゲーションのアイデアや実装方法を紹介します。

レスポンシブ対応 ナビゲーションの実装方法のまとめ

各ページでコードやファイルもダウンロードでき、すぐに利用できます。

デモのキャプチャ

Stripe.Com Navigation
デモページ

Stripe.comで採用されているような、各アイテムのドロップダウンがモーフィングで変化する新しいタイプのナビゲーション。コンテンツに合わせて、デザインを変更できます。
小さい画面ではデザインの異なる各アイテムがきれいにまとめられています。

デモのキャプチャ

Auto-Hiding Navigation
デモページ

ページを下にスクロールすると、ヘッダが自動で非表示になります。上にスクロールすると、すぐに表示されます。
デスクトップではヘッダが表示されていても気になりませんが、スマホなどの小さい画面では有益なテクニックですね。

デモのキャプチャ

Simple Responsive Tabs With JavaScript & CSS
デモページ

レスポンシブ対応のシンプルなタブ型ナビゲーション。
操作は快適で、小さい画面ではアイコンを活用したタブデザインに変更されます。

デモのキャプチャ

Google Nexus Website Menu
デモページ

Nexusのサイトで使用されていたサイドバーメニューがスライドアウトするタイプのナビゲーション。最初はアイコンだけが表示され、次のアクションでアイテムが表示されます。ホバー・クリック、そしてタップをうまく組み合わせた操作です。

デモのキャプチャ

Multi-level push menu
デモページ

プッシュ型のメニューを多階層、重ねることができるナビゲーション。右・左のスワイプ操作にも対応しており、スマホで快適な操作を実現しています。

デモのキャプチャ

Pikabu -GitHub
デモページ

左右どちらにもプッシュ型のメニューを表示できます。実装はシンプルで、カスタマイズ性にも優れています。

デモのキャプチャ

4 Sweet and Responsive Navigation Menus
デモページ

4つの異なるデザインが用意されたレスポンシブ対応のナビゲーション。小さい画面では各アイテムが積み重なって表示されます。

デモのキャプチャ

Secondary Sliding Navigation
デモページ

第2レベルのアイテムをスライドで表示するナビゲーション。
サイトの構造で深い階層を持つコンテンツが少ない時に、ぴったりのアイデアです。

デモのキャプチャ

Responsive Sidebar Navigation
デモページ

サイトの構造で深い階層を持つコンテンツが多い時には、このナビゲーションが助けてくれます。デスクトップ時はもちろん、スマホ時でも複数の多階層コンテンツをナビゲートできます。

デモのキャプチャ

Mega Dropdown
デモページ

多階層コンテンツを一覧できるメガドロップ型のナビゲーション。
ドロップダウンのデザインは、リスト、画像、アイコンが用意されています。キャプチャのリストでは、アローから更に下の階層も表示されます。

デモのキャプチャ

3D Rotating Navigation
デモページ

ナビゲーションを3Dのアニメーションで表示する、インパクト大のエフェクトです。仕組みは、ナビゲーションが折り畳まれており、それが伸びて表示されるイメージです。

デモのキャプチャ

3D Bold Navigation
デモページ

ナビゲーションがダイナミックにスライドして、そのアニメーションと同様にページが遷移します。コンテンツのスクロール位置に限らず、どこでも表示することができます。