FlexNav

JavaScript

見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「FlexNav」

シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実装できるjQueryプラグイン「FlexNav」。PC版ではマウスオーバーすることでメニューが表示され、スマホではタップでメニューが開閉します。これから特に需要がありそうなプラグインですね。

[ads_center]

使い方

PC版のFlexNav

PC版ではこのようにマウスオーバーでメニューが降りてきます。

スマホ版のFlexNav

スマホ版ではこんな感じ。シンプルにまとまってますね。タップすることでメニューが開閉します。

使い方はとても簡単です。ダウンロードしたファイルをhead内に読み込みます。jQuery本体も読み込んでいる必要があります。

<link href="css/flexnav.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

em単位でブレイクポイントを設定。

<ul class="flexnav" data-breakpoint-em="50">
    <li>...</li>
</ul>

あとはFlexNavをセットすればOKです。

$(".flexnav").flexNav();

オプションでメニューが降りてくるスピードなどを調整することができます。詳しくは公式サイトで確認することができます。

関連記事

  1. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  2. Recursive Hover Nav
  3. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  4. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで紹介したjQueryプラグイン12選のまとめ 2012/08 – 2012/0…

    2012年8月〜2012月9月までの当ブログで紹介したjQueryプラ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP