個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10

HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する

記事を読む

Bootstrapの無料テーマを探すなら一箇所で全部探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」

Bootstrapの無料テーマを探すなら一箇所でまとめて探せる「ThemeFinder」をご紹介しま

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

美しいエフェクトが施されたCSSで作られたボタン12

css3で作られた美しいデザインのボタンがコレクションされていましたのでご紹介します。 優雅で目を

記事を読む

スタイリッシュなポップアップ/モーダルウインドウ用jQueryプラグイン53選

スタイリッシュなポップアップ/モーダルウインドウ用jQuery無料プラグイン25

jQueryで実装できるスタイリッシュなポップアップ/モーダルウインドウ用プラグインをご紹介します。

記事を読む

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+

ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ

記事を読む

月額約400円でWindowsリモートデスクトップが使えるVirmach:MT4もサクサク

Windowsリモートデスクトップが月額400円のVirmach:MT4もサクサクだ!

普段はMacをメインに使っており、Windowsが必要なときにはBootCampでWindowsを使

記事を読む

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

左右からメニューがスルッ!CSSだけで作れらたオフカンバスメニュー

左右からメニューがスルッ!CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。 「オフカンバスメニュー」は、ボタ

記事を読む