1. まとめトップ

【この機能がほしかった!】多階層のレシポンシブメニュー16選

デモ直通リンク&日本語解説サイト併記なので、探しやすく使いやすい! 『この機能がほしかった!』とうならせるレスポンシブ用メニューを厳選しました。ドロップダウンタイプとスライドタイプで分類しています。

更新日: 2016年07月19日

6 お気に入り 27859 view
お気に入り追加

◎ドロップダウンタイプ

↓デモはこちら
http://slicknav.com/
のExamples内のAdvanced Demoが多階層のデモです

※こちらで日本語で詳しく解説されています。
「 jQuery レスポンシブメニュープラグイン SlickNav の使い方」
http://www.webdesignleaves.com/wp/jquery/1384/

……………………………………………………………………………………………………………………

指定サイズ以下になるとメニューバーのみが表示。クロスブラウザー(IEは7以降)対応のドロップダウンメニューです。簡単に実装できるjQueryプラグイン。

↓デモはこちら
http://jasonweaver.name/lab/flexiblenavigation/

※こちらで日本語で詳しく解説されています。
こうめの“これから使える”jQueryプラグイン
「レスポンシブにも対応したドロップダウン FlexNav」
http://ascii.jp/elem/000/000/871/871147/

……………………………………………………………………………………………………………………

指定サイズ以下になると、水平メニューからドロップダウンメニューに変わります。オプションでキーボードからのメニュー操作も出来ます。クロスブラウザ対応。

↓デモはこちら
http://www.smartmenus.org/

※こちらで日本語で詳しく解説されています。
にわか管理者のIT勉強ノート
「レスポンシブメニューSmartMenusを実装しよう」
http://it-benkyou.seesaa.net/article/433770657.html

……………………………………………………………………………………………………………………

下階層に行く時のアニメーションがかっこいいです。アニメーションは5種類。

↓デモはこちら
http://tympanus.net/Development/ResponsiveMultiLevelMenu/

※こちらで日本語で詳しく解説されています。
「これはオシャレ!デザインとアニメーションが秀逸なメニューを実装するJSライブラリ」
http://akiok-jp.hatenablog.com/entry/2013/04/23/225038

……………………………………………………………………………………………………………………

スクリプトを使用せずにHTMLとCSSだけで構成されています。指定サイズ以下になると、メニューバーのみが表示されます。

↓デモはこちら
http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/

※こちらで日本語で詳しく解説されています。
SEM Labo
「Responsive drop-down navigation」の使い方」
http://www.oosaka-web.jp/column/web/160314/

……………………………………………………………………………………………………………………

指定サイズ以下になると、メニューバーのみが表示。3階層にも対応。

↓デモはこちら
http://adnantopal.github.io/slimmenu/

※こちらで日本語で詳しく解説されています。
Peaceful Days
「jQuery slimMenuの実装とデザインを修正する方法」
http://peacefulpuzzle.com/blog/web/j-query/jquery-slimmenu_remake/

……………………………………………………………………………………………………………………

多階層のレスポンシブなアコーディオンメニュー。CSSのみで動くもの、jQueryでアニメーションをつけたサンプルがあります。

↓デモはこちら
https://codyhouse.co/demo/multi-level-accordion-menu/index.html

※こちらで日本語で詳しく解説されています。
「シンプルな開閉するアコーディオンメニュー #jQuery」
http://tommytommytommy.cocolog-nifty.com/blog/2011/05/jquery-dec7.html

……………………………………………………………………………………………………………………

指定サイズ以下になると、水平メニューからドロップダウンメニューに変わります。

↓デモはこちら
http://www.meanthemes.com/demo/meanmenu/demo.html

※こちらで日本語で詳しく解説されています。
「レスポンシブ対応メニュー用jQueryプラグイン「meanmenu.js」」
http://morobrand.net/mororeco/jquery/meanmenu/

……………………………………………………………………………………………………………………

多階層に対応したドロップダウンメニュー。
横並びのメニューから、ブレークポイントで縦並びになります。

↓デモはこちら
https://www.script-tutorials.com/demos/335/index.html

……………………………………………………………………………………………………………………

スクリプトを使用せずにHTMLとCSSだけで構成されています。CSSアニメーションでなめらかに動きます。

↓デモはこちら
http://red-team-design.com/wp-content/uploads/2013/02/animenu-demo.html

1 2





吉田モグラさん

吉田モグラの備忘録を兼ねたまとめです。情報量の多いページをこころがけてます。

このまとめに参加する