【jQuery】fatNavでフルスクリーンのハンバーガーメニューを作る

WEB 2017.09.11

ハンバーガーメニューをフルスクリーンで表示できるjQueryプラグイン「fatNav」の実装方法についてご紹介します。
シンプルで、とても簡単に実装できるのでオススメです。当ブログでもこのプラグインを使用してます（スマホの時）。

実際の動きを確認できるデモページを作りました。

DEMO jQuery fatNav | MISOBLOG

1 fatNavをダウンロードする
2 fatNavの実装方法
3 おわり

fatNavをダウンロードする

下記リンクのページ内で「Download .zip」をクリックして、ファイル一式をダウンロードします。

jQuery fatNav

ダウンロードしたファイルを解凍し、下記のファイルを読み込みます。

jquery.fatNav.min.css
jquery.fatNav.min.js

色とかをカスタマイズしたい場合は、圧縮されていない方の「jquery.fatNav.css」を使うと良いと思います。


<link rel="stylesheet" href="jquery.fatNav.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.fatNav.min.js"></script>

CSSファイルは、<head>タグ内で、
jsファイルは、<body>の閉じタグ直前で、jQuery本体の下に記述してください。

fatNavの実装方法

先ほど読み込んだjsファイルの後に下記を記述します。


<script>
$(function() {
    $.fatNav();
});
</script>

デモページでは、HTMLはこのように書いてます。
専用のCSSファイルを読み込んでるので、勝手に良い感じになります。


<div class="fat-nav">
    <div class="fat-nav__wrapper">
        <ul>
            <li><a href="#">Menu1</a></li>
            <li><a href="#">Menu2</a></li>
            <li><a href="#">Menu3</a></li>
            <li><a href="#">Menu4</a></li>
        </ul>
    </div>
</div>