個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

レスポンシブWEBデザイン用ナビゲーション&メニューのベストパターン16

レスポンシブWEBデザインは当たり前の世の中になりました。
当たり前になるにつれて、レスポンシブWEBデザインに関連するさまざまなパーツが類型化・体系化されてきています。
今回ご紹介するナビゲーション&メニューについても、ある程度、メジャーなパターンというものが出来上がってきています。
そこで今回は、レスポンシブWEBデザインのナビゲーション&メニューのベストパターンをご紹介します。
多くのものはjQueryを使って簡単にだれでも実装できるものばかりです。

SlickNav

responsive_menu_2
ウインドウ幅が指定サイズ以下になると、メニューアイコンに変化して右上に表示されるタイプです。
多階層にも対応していていたり、アニメーションで動きもつけられます。
ie7以上に対応。
詳しい実装方法がサイトにのっているのでわかりやすいです。
SlickNav

FlexNav

responsive_menu_3
指定サイズ以下になると、メニューバーのみが表示されるタイプです。
ドロップダウンメニューに対応で、ie7以上にも対応しています。
FlexNav

SmartMenus

responsive_menu_4
指定サイズ以下になると、水平メニューから垂直メニューに変わります。
多階層に対応しています。
SmartMenus

Trunk.js

Trunk
タブレット、スマホでは左からオフセットするタイプのメニューを実装します。
説明とかがないため、ダウンロードしたデモをもとに実装する形になるで、少々わかりにくいかもしれません。
Trunk.js

Sidr

responsive_menu_6
左右からスルリとメニューを出します。
実装も簡単です。
Sidr

Codrops – Responsive Multi-Level Menu

responsive_menu_7
メニューアイコンをクリックするとふわりとメニューが現れます。
多階層にも対応していますが、上下階層のメニューを表示するときのアニメーションもかっこいいです。
Codrops – Responsive Multi-Level Menu

Responsive Nav

responsive_menu_8
指定サイズ以下になると、メニューバーのみが表示されるタイプです。
わずか1.6kと軽く、しかも、jQueryを始めとするライブラリーも必要なし。
Responsive Nav

Drop-Down Navigation

responsive_menu_9
指定サイズ以下になると、メニューバーのみが表示されるタイプです。
Drop-Down Navigation

Implementing Off-Canvas Navigation For A Responsive Website

responsive_menu_10
指定サイズ以下になると、メニューバーのみが表示され、メニューボタンを押すと、左からメニューがスルリと現れます。
Implementing Off-Canvas Navigation For A Responsive Website

jQuery Navobile

responsive_menu_12
同じく指定サイズ以下になると、メニューバーのみが表示され、メニューボタンを押すと、左からメニューがスルリと現れます
jQuery Navobile

jPanelMenu

responsive_menu_11
こちらは最初からメニューバーのみが表示されていて、メニューボタンを押すと、左からメニューがスルリと現れます。
jPanelMenu

Mmenu

responsive_menu_13
こちらも最初からメニューバーのみが表示されていて、メニューボタンを押すと、左からメニューがスルリと現れます。
Mmenu

slimMenu

responsive_menu_14
指定サイズ以下になると、メニューバーのみが表示されるタイプです。
多階層に対応しています。
slimMenu

Navigataur.css

Navigataur
CSSで作られたレスポンシブ対応メニュー
DEMONavigataur.css

Pushy

responsive_menu_17
こちらも最初からメニューバーのみが表示されていて、メニューボタンを押すと、左からメニューがスルリと現れます。
Pushy

Responsive Mobile Menu

responsive_menu_19
指定サイズ以下になると、メニューバーのみが表示されるタイプです。
Responsive Mobile Menu

メニューのまとめサイト

レスポンシブに対応したメニューを類型化して解説してくれているサイト3つの記事です。

Responsive menu patterns by Erick Arbe

responsive_menu_5
Responsive menu patterns by Erick Arbe

Responsive Menu Concepts | CSS-Tricks

responsive_menu_15
Responsive Menu Concepts | CSS-Tricks

Responsive Navigation Patterns | Brad Frost Web

responsive_menu_20
Responsive Navigation Patterns | Brad Frost Web

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 27
  • 56

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインの勉強・参考に!プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80

WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ

記事を読む

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

よくわかる 初心者のためのCSS3 transitionとtransformのチュートリアル

初心者のためのCSS3 transition(トランジション)とtransform(トランスフォーム

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」

無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?

記事を読む

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた

100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?

各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に

記事を読む

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

超簡単!CSSで上下左右センターにする方法

超簡単!CSSで上下左右センターにする方法

超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む