レスポンシブのうまいアイデア満載!RWD対応のナビゲーションを実装するスクリプトのまとめ
Post on:2015年5月7日
sponsors
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。
※各キャプチャはAm I Responsiveを使用して作成しました。

Slidebars (jQueryのプラグイン)
Slidebars -GitHub
デモページ
Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。
WordPressのプラグインも有り。

mmenu (jQueryのプラグイン)
mmenu -GitHub
デモページ
On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。

Responsive Nav (単独スクリプト)
Responsive Nav -GitHub
デモページ
レスポンシブ用のシンプルな超軽量(1KB)のナビゲーション。

左右・上部のどこにでも簡単に配置できるナビゲーション。

Naver (jQueryのプラグイン)
Naver -GitHub
デモページ
シンプルながら多彩なエフェクトが用意されたナビゲーション。ブレイクポイントも簡単に設定できます。

Pushy (jQueryのプラグイン)
Pushy -GitHub
デモページ
Off Canvasタイプのナビゲーション、動作が非常に軽快でシンプルです。

slimMenu (jQueryのプラグイン)
slimMenu -GitHub
デモページ
on the flyタイプの多階層対応のナビゲーション。

Mega-Site Navigation (jQueryのプラグイン)
Mega-Site Navigation -GitHub
デモページ
レスポンシブ対応のメガサイト用ナビゲーション。さまざまなデザイン・エフェクトが用意されています。

Fly Side Menu -GitHub (jQueryのプラグイン)
デモページ
fly sideタイプのナビゲーションで、コンテンツがダイナミックなアニメーションで傾きます。

Off-Canvas Menu Effects (SVG)
OffCanvasMenuEffects -GitHub
デモページ
CSSアニメーションやSVGのパスアニメーションを使った、面白いエフェクト満載のOff Canvasタイプのナビゲーション。
sponsors