Responsive Nav

JavaScript

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

レスポンシブ対応のナビゲーションを実装できる「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");

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

Responsive Nav — Responsive Navigation Plugin

関連記事

  1. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  2. DD Scroll Boxes
  3. Docked Link jQuery Plugin
  4. Add To Cart Interaction
  5. Albumize

    JavaScript

    アルバムみたいな画像コレクションのギャラリーを管理・実装できるjQueryプラグイン「Albumiz…

    Webページにある画像コレクションをアルバムのようなギャラリーに管理・…

  6. JavaScript

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラグイン「SHARDS」

    多層に重なり合う美しいグラデーションの背景を実装できるjQueryプラ…

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP