レスポンシブのうまいアイデア満載!RWD対応のナビゲーションを実装するスクリプトのまとめ

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)のナビゲーション。

デモのキャプチャ

Drawer
Drawer -GitHub
デモページ

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

デモのキャプチャ

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タイプのナビゲーション。

top of page

©2017 coliss