jQuery fatNav

JavaScript

ミニマルテイストなフルスクリーンメニューを実装できる「jQuery fatNav」

jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。

jQuery fatNav

デモ

メニューはフェードでズームイン、ズームアウトのアニメーションで表示されます。自然な一連の動作がとてもいい感じです。

使い方もシンプルなところが嬉しいですね。こんな感じでマークアップすることができます。

<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">メニュー1</a></li>
            <li><a href="#">メニュー2</a></li>
            <li><a href="#">メニュー3</a></li>
        </ul>
    </div>
</div>

jQuery fatNavを呼び出します。

$.fatNav();

jQuery fatNav

ミニマルな感じのナビゲーションメニューをフルスクリーンで実装したい時に覚えておきたいですね。

関連記事

  1. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  2. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  3. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  4. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

  5. JavaScript

    JavaScriptのlocation.searchでクエリ情報を取得してみる

    JavaScriptで、現在のページのクエリ情報(URLの末尾にある「…

  6. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP