jQuery
【jQuery】素敵なハンバーガートグルとフルスクリーンメニューjQuery fatNav
May 3, 2016

【jQuery】プラグインを使って実装。フルスクリーン系ナビゲーション10選でご紹介したjQuery fatNav。jQuery fatNavは素敵なハンバーガートグルとフルスクリーンメニュープラグイン。
jquery.fatNav.css、jquery.fatNav.jsを読み込み。
<link rel="stylesheet" href="dist/jquery.fatNav.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="dist/jquery.fatNav.min.js"></script>
<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>
デフォルト
.hamburger .hamburger__icon, .hamburger .hamburger__icon:before, .hamburger .hamburger__icon:after { background-color: red; }
閉じるボタン
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after { background-color: green; }
MITライセンス