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. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  2. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  3. jquery.confirmDialog
  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  6. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

コメント

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

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

最近の記事

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

アーカイブ

PAGE TOP