レスポンシブ対応のナビゲーションを実装できる「Responsive Nav」がとてもよかったのでメモがてらご紹介します。とても軽量で使いやすそうですね。jQueryなどを必要とせず、単体で動作できるのが嬉しいところです。
[ads_center]
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");
こんな感じであっという間にレスポンシブに対応したナビゲーションを実装することができるので、とても便利ですね。また、オプションも色々と用意されているので詳細については公式サイトで確認することができます。
