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. roll.js

    JavaScript

    スクロールによるページネーション、進捗度、ポジションなどの値を取得できる「roll.js」

    roll.jsはスクロールによるページネーション、進捗度、ポジションな…

  2. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

  3. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

  4. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  5. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城

Instagram始めました

Facebookページ

PAGE TOP