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

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

Photoshopで明るさや彩度のスライダー数値を0に戻す簡単なやり方前のページ

斜めにデザインされたスタイリッシュなjQueryイメージスライダー「Diagonal Slider」次のページDiagonal Slider

関連記事

  1. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  2. Adi.js

    JavaScript

    アドブロックを検知してくれる「Adi.js」

    Adi.jsはアドブロックを検知してくれるjQueryプラグインです。…

  3. no-image
  4. simpler-sidebar

    JavaScript

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

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

  5. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  6. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

最近の記事

  1. ナイトロコーヒー
  2. チーズベーコンエッグバーガー
  3. ランチセットA
PAGE TOP