レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

Responsive Nav

レスポンシブ対応のナビゲーションを実装できる「Responsive Nav」がとてもよかったのでメモがてらご紹介します。とても軽量で使いやすそうですね。jQueryなどを必要とせず、単体で動作できるのが嬉しいところです。

Responsive Navの使い方

使い方はとてもシンプルです。head内にCSS・JSファイルを読み込みます。

<link rel="stylesheet" href="responsive-nav.css">
<script src="responsive-nav.js"></script>

HTMLでナビゲーションを記述していきます。

<nav class="sample">
    <ul>
        <li><a href="#">メニュー1</a></li>
        <li><a href="#">メニュー2</a></li>
        <li><a href="#">メニュー3</a></li>
        <!-- 中略 -->
    </ul>
</nav>

あとはResponsive Navをセットすれば完了です。簡単ですね。

var nav = responsiveNav(".sample");

こんな感じであっという間にレスポンシブに対応したナビゲーションを実装することができるので、とても便利ですね。また、オプションも色々と用意されているので詳細については公式サイトで確認することができます。

Responsive Nav — Responsive Navigation Plugin

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives