[JS]レスポンシブ対応のシンプルながら高性能なすごいナビゲーション！ -Resposive Nav

サイト構築 -JavaScript

Post on:2013年4月10日

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もサポートするシンプルなデモは、こちら。

Simple demo with IE support

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のコールバック
});