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

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

サイトのキャプチャ

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

top of page

©2017 coliss