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. Bootstrap Mobile FullScreen Modal
  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. miSlider

    JavaScript

    複数の画像を表示したりスライドしたりできるスライダー「miSlider」

    miSliderは複数の画像やスライドの表示を可能にするスライダーを実…

  4. Materialize Tags

    JavaScript

    マテリアルデザインのタグ管理を実装できる「Materialize Tags」

    Materialize Tagsは、マテリアルデザインのタグ管理を実装…

  5. jQuery.GI.TheWall.js
  6. no-image

    JavaScript

    シンプルでスタイリッシュなjQueryスライダー「Simple slider」

    Simple sliderはシンプルでスタイリッシュなスライダー(カル…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP