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

【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>

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>

ハンバーガーの色をカスタマイズ

デフォルト

.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ライセンス

 
jQuery fatNav

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

  • LATEST
  • RELATED
  • POPULAR