Naver

JavaScript

シンプルですごくいい!レスポンシブに合うナビゲーションのjQueryプラグイン「Naver」

NaverというjQueryプラグインがすごくシンプルでよかったのでご紹介します。これを使えばレスポンシブWebデザインに合うナビゲーションを簡単に実装することができます。モバイルフレンドリーなナビゲーションは今後のWeb制作に必須の要素ですね。

[ads_center]

Naverの使い方

実際のデモでは、このように普通のナビゲーションから、

Naver

画面サイズを縮小していくと、このようにモバイル用のレイアウトに最適化されます。

モバイル用のレイアウト

クリックするとメニューが表示されます。

クリックでメニューが表示

モバイル用のナビゲーションメニューとしてはよく見るレイアウトなのでユーザーも使いやすそうですね。使い方もとてもシンプルです。

$("nav").naver();

以下はHTML。

<nav>
    <a href="#">メニュー1</a>
    <a href="#">メニュー2</a>
    <a href="#">メニュー3</a>
</nav>

ブレイクポイントを設定する場合は以下のように記述。デフォルトは980pxよりも小さくなるとモバイル用に切り替わる設定になっています。

$("nav").naver({
    maxWidth: "500px"
});

スマホやタブレットにも対応できる柔軟なナビゲーションを実装したいと思っている人は一度試してみてはいかがでしょうか。

Naver · Formstone · Front-End Components

関連記事

  1. JavaScript

    ライトボックスみたいなお洒落なアラートを出してカスタマイズもできるjQuery uLightBox …

    ライトボックスみたいなお洒落なアラートを表示させることができるjQue…

  2. Guardian

    JavaScript

    フォームにバリデーションを実装できるjQueryプラグイン「Guardian」

    Guardianはフォームにバリデーション機能を実装することができるj…

  3. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

  4. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  5. Multi-Level Menu

    JavaScript

    流れるような遅延アニメーションが美しい階層化メニュー実装「Multi-Level Menu」

    Multi-Level Menuは流れるような遅延アニメーションが美し…

  6. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

最近の記事

  1. Happy Plugs AIR1
  2. cheero Stream 10000mAh
  3. BOSE HOME SPEAKER 300
  4. RP-PC112
  5. SRS-XB402M

アーカイブ

PAGE TOP