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();

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

画像をボックス単位に分割してスライドさせていくjQueryプラグイン「Maskify Slider」前のページ

CSS transitionsを活用したシンプルなスライドショーを実装できるjQueryプラグイン「Cavendish.js」次のページCavendish.js

関連記事

  1. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  2. radialIndicator

    JavaScript

    シンプルな円形のインジケーターを実装できるjQueryプラグイン「radialIndicator」

    radialIndicatorはシンプルで美しい円形のインジケーターを…

  3. Shuffle Letters

    JavaScript

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

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

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  5. Typewriter JS

    JavaScript

    タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

    Typewriter JSは、タイプライターを使って文字入力するような…

  6. simpler-sidebar

    JavaScript

    シンプルでスタイリッシュなサイドナビゲーション「simpler-sidebar」

    simpler-sidebarは、シンプルでスタイリッシュなサイドナビ…

コメント

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

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

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP