• RSS

[JS]シンプルなフルスクリーンメニューのjQueryプラグイン「jQuery fatNav」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ハンバーガーメニューをクリックして、フルスクリーンでナビゲーションメニューを表示できるjQueryプラグイン「jQuery fatNav」のご紹介です。

jQuery fatNav のダウンロード

以下のページからjQuery fatNavのファイルをダウンロードします。
シンプルなフルスクリーンメニューのjQueryプラグイン「jQuery fatNav」

jquery.min.jsファイルと一緒にjquery.fatNav.cssjquery.fatNav.js を読み込み、JavaScript関数を呼び出します。
<link href="./jquery.fatNav/jquery.fatNav.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./jquery.fatNav/jquery.fatNav.min.js"></script>
<script>
$(document).ready(function() {
$.fatNav();
});
</script>

続いて、HTMLファイル側でナビゲーションメニューの部分を用意します。
<div class="fat-nav">
<div class="fat-nav__wrapper">
<ul>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
<li><a href="#">Menu item</a></li>
</ul>
</div>
</div>

ハンバーガートグルのカスタマイズ

jquery.fatNav.css を編集することで、ハンバーガーメニューの色を変更するなど、デザインの変更も可能です。
.hamburger .hamburger__icon, 
.hamburger .hamburger__icon:before, 
.hamburger .hamburger__icon:after {
background-color: #dd0000;
}

以下のページで、jQuery fatNavによるデモページを用意しました。
※デモページの左上のハンバーガーメニューをクリックすることで、フルスクリーンメニューを表示します。
jQuery fatNav のフルスクリーンメニューデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す