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. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  2. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  3. JavaScript

    レスポンシブなLightbox風のギャラリーを実装できるjQueryプラグイン「anoFlow」

    anoFlowというjQueryプラグインを使えば、レスポンシブなLi…

  4. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  5. JQuery SlideShow

    JavaScript

    軽量な自動スライドショー(画像・動画)を実装できる「JQuery SlideShow」

    JQuery SlideShowは、画像・動画のスライドショーを実装で…

  6. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

コメント

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

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

最近の記事

  1. M360bt
  2. BQ-CASE/1
  3. GLOO BOX

アーカイブ

PAGE TOP