[JS]シンプルなフルスクリーンメニューのjQueryプラグイン「jQuery fatNav」
スポンサード
jquery.min.jsファイルと一緒にjquery.fatNav.css、jquery.fatNav.js を読み込み、JavaScript関数を呼び出します。
スポンサード
ハンバーガーメニューをクリックして、フルスクリーンでナビゲーションメニューを表示できるjQueryプラグイン「jQuery fatNav」のご紹介です。
以下のページからjQuery fatNavのファイルをダウンロードします。
jquery.min.jsファイルと一緒にjquery.fatNav.css、jquery.fatNav.js を読み込み、JavaScript関数を呼び出します。
1 2 3 4 5 6 7 8 | <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ファイル側でナビゲーションメニューの部分を用意します。
1 2 3 4 5 6 7 8 9 10 | <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 を編集することで、ハンバーガーメニューの色を変更するなど、デザインの変更も可能です。1 2 3 4 5 | .hamburger .hamburger__icon, .hamburger .hamburger__icon:before, .hamburger .hamburger__icon:after { background-color: #dd0000; } |
以下のページで、jQuery fatNavによるデモページを用意しました。
※デモページの左上のハンバーガーメニューをクリックすることで、フルスクリーンメニューを表示します。
jQuery fatNav のフルスクリーンメニューデモ
スポンサード
コメント