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. Expanding Bar Navigation Concept
  2. swipe-menu-js

    JavaScript

    横からスライド・スワイプ表示するハンバーガーメニュー実装「swipe-menu-js」

    swipe-menu-jsは横からスライド・スワイプ表示するシンプルな…

  3. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  4. jQuery.fontFlex
  5. Responsive jQuery Pop Up Gallery
  6. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

最近の記事

  1. 赤いなつめ
  2. ペーストしてスタイルを合わせる
  3. Hermèsオレンジスポーツバンド
  4. GoPro HERO8 Black

アーカイブ

PAGE TOP