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. Salvattore
  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでパターン化されたクラス名をループで1つずつ取り出して処理する

    どうでもいい内容なんですがちょっとやりたかったのでメモです。jQuer…

  3. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  4. sticky-items

    JavaScript

    HTML要素をページ上部に固定させれるjQueryプラグイン「sticky-items」

    sticky-itemsは指定したHTML要素をWebページの上部に付…

  5. no-image

    JavaScript

    スタイリッシュなスライダーを実装できるjQueryプラグイン「bsc-slider」

    bsc-sliderは、シンプルでスタイリッシュなスライダーを実装する…

  6. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

最近の記事

  1. すしざんまい
  2. 蒼龍唐玉堂 特製牛バラ担々麺
  3. サーモンアボカドサラダラップとドリップ
  4. 猿田彦フレンチ
  5. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて

アーカイブ

PAGE TOP