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. Greedy Navigation

    JavaScript

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

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

  2. lory

    JavaScript

    タッチ対応でカルーセルにもできるミニマルなJS(jQuery)スライダー「lory」

    loryはタッチに対応したミニマルなデザインが特徴的なスライダーを実装…

  3. jQuery contextMenu plugin & polyfill
  4. pell

    JavaScript

    軽量でシンプルなWeb用のWYSIWYGエディタを実装できる「pell」

    pellは1.5KBと非常に軽量でシンプルなWeb用のWYSIWYGエ…

  5. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  6. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP