レスポンシブのうまいアイデア満載!RWD対応のナビゲーションを実装するスクリプトのまとめ
Post on:2015年5月7日
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。
※各キャプチャはAm I Responsiveを使用して作成しました。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-01.png)
Slidebars (jQueryのプラグイン)
Slidebars -GitHub
デモページ
Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。
WordPressのプラグインも有り。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-02.png)
mmenu (jQueryのプラグイン)
mmenu -GitHub
デモページ
On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-03.png)
Responsive Nav (単独スクリプト)
Responsive Nav -GitHub
デモページ
レスポンシブ用のシンプルな超軽量(1KB)のナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-09.png)
左右・上部のどこにでも簡単に配置できるナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-04.png)
Naver (jQueryのプラグイン)
Naver -GitHub
デモページ
シンプルながら多彩なエフェクトが用意されたナビゲーション。ブレイクポイントも簡単に設定できます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-05.png)
Pushy (jQueryのプラグイン)
Pushy -GitHub
デモページ
Off Canvasタイプのナビゲーション、動作が非常に軽快でシンプルです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-06.png)
slimMenu (jQueryのプラグイン)
slimMenu -GitHub
デモページ
on the flyタイプの多階層対応のナビゲーション。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-07.png)
Mega-Site Navigation (jQueryのプラグイン)
Mega-Site Navigation -GitHub
デモページ
レスポンシブ対応のメガサイト用ナビゲーション。さまざまなデザイン・エフェクトが用意されています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-08.png)
Fly Side Menu -GitHub (jQueryのプラグイン)
デモページ
fly sideタイプのナビゲーションで、コンテンツがダイナミックなアニメーションで傾きます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015050501-10.png)
Off-Canvas Menu Effects (SVG)
OffCanvasMenuEffects -GitHub
デモページ
CSSアニメーションやSVGのパスアニメーションを使った、面白いエフェクト満載のOff Canvasタイプのナビゲーション。
sponsors