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

• Tag
• jQuery
• Navigation