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

ヴィンテージなロゴのテンプレートヴィンテージなロゴのテンプレート30選前のページ

CSSのコードだけで実装できるWebデベロッパーのための28のスニペット次のページCSSだけで実装できるスニペット

関連記事

  1. NO IMAGE
  2. Mobilepopup

    JavaScript

    軽量でモバイルにも最適なポップアップウィンドウを実装できる「Mobilepopup」

    Mobilepopupは、軽量でカスタマイズ性に優れたモバイルにも最適…

  3. Greedy Navigation

    JavaScript

    レスポンシブ対応でメニューのアイテム数がわかりやすい「Greedy Navigation」

    Greedy Navigationはレスポンシブ対応でメニューのアイテ…

  4. Image Figure Caption effects
  5. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  6. Valiant 360

    JavaScript

    360度のパノラマ動画を実装できるビデオプレーヤー「Valiant 360」

    Valiant 360はブラウザ上で360度のパノラマ動画・写真を実装…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP