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. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  2. CSS3 Menu Slider
  3. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

  4. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  5. Dynamic Table

    JavaScript

    スプレッドシートのようなテーブルを実装できるjQueryプラグイン「Dynamic Table」

    Dynamic Tableはスプレッドシートのような高機能なテーブルを…

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP