[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav
Post on:2013年4月10日
sponsorsr
jQueryなどに依存せず単体で動作し、スクリプトがオフでも機能し、実装も非常にシンプルで、デスクトップやタブレット・スマフォそれぞれで最適な状態で表示し、IE6にさえ対応し、しかも超軽量のスクリプトを紹介します。
Responsive Nav
Responsive Nav -GitHub
Resposive Navの特徴
- シンプルで、セマンティックなマークアップ
- 1.8KBの超軽量スクリプト
- 外部ライブラリは不要
- CSS3アニメーションを使った美しいエフェクト
- タッチイベントをサポート
クリックとタップの違いを調整 - スクリプトがオフでも機能
- MITライセンス
対応ブラウザ
IE6をはじめ、デスクトップ・タブレット・スマフォの主要なブラウザ全て。
以下は、テスト済みのプラットフォームです。
- iOS 4.2.1+
- Android 1.6+
- Windows Phone 7.5+
- Blackberry 7.0+
- Blackberry Tablet 2.0+
- Kindle 3.3+
- Maemo 5.0+
- Meego 1.2+
- Symbian 3
- Symbian Belle
- Symbian S40 Asha
- webOS 2.0+
- Windows XP
- Windows 7
- Mac OS X
Resposive Navのデモ
デモはスクリプトがオンでも、オフでもナビゲーションとして機能します。
デモページ：幅1,200pxで表示
デモページ：幅780pxで表示
デモページ：幅480pxで表示
IEもサポートするシンプルなデモは、こちら。
Resposive Navの使い方
実装は非常にシンプルで、簡単です。
Step 1: 外部ファイル
head内に当スタイルシートとスクリプトを配置します。
<link rel="stylesheet" href="responsive-nav.css"> <script src="responsive-nav.js"></script>
Step 2: HTML
ナビゲーションの各アイテムをリストで実装します。
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Step 3: JavaScript
</body>の上にスクリプトを記述し、実行します。
<script>
var navigation = responsiveNav("#nav");
</script>
スクリプトのオプション
オプションでは、アニメーションの有無やスピードなどが簡単に設定できます。
var navigation = responsiveNav("#nav", { // セレクタ：ラッパーのid
animate: true, // CSS3アニメーションの有無
transition: 400, // アニメーションのスピード
label: "Menu", // ナビゲーションのトグル用のラベル
insert: "after", // トグルをナビゲーションの後にするか前にするか
customToggle: "", // カスタムトグルのid
tabIndex: 1, // トグルのタブインデックス
openPos: "relative", // 開いたナビゲーションをrelative or staticにするか
jsClass: "js", // <html>に加える使用可能なclass
debug: false, // デバッグ用メッセージ表示の有無
init: function(){}, // initのコールバック
open: function(){}, // openのコールバック
close: function(){} // closeのコールバック
});
sponsors
