【jQuery】コピペで簡単！ハンバーガーメニューの作り方！

シュウ

今回は【jQuery】コピペで簡単！ハンバーガーメニューの作り方！
の解説になります！

これからWEB制作を始める初心者の方
既存サイトに手軽にハンバーガーメニューを導入したい方
今回はコピペで簡単に作れるように解説しております。

[記事の内容]

ハンバーガーメニューについて

ハンバーガーメニューとは、ウェブサイトやスマートフォンのアプリの画面のどこかにある、横線が3本並んだマーク（≡）のことです。ハンバーガーメニューをクリックする事により、ナビゲーションを表示させたり、コンテンツを表示させる事が可能になります。
こちらにデモサイトはこちらになります。

ハンバーガーメニューを実装させる HTML編

HTMLは、ハンバーガーメニューのエリア「#nav-toggle」を記述します。
今回は「#nav-toggle」の中に「nav」を記述しておきます。
コンテンツ「#main-contents」を記述しておきます。２つ用意してください。
HTMLは以下になります。

<div id="nav-toggle">
    <div>
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<nav id="gloval-nav">
    <ul>
        <li><a href="#">NAV01</a></li>
        <li><a href="#">NAV02</a></li>
        <li><a href="#">NAV03</a></li>
        <li><a href="#">NAV04</a></li>
        <li><a href="#">NAV05</a></li>
    </ul>
</nav>
<div id="main-contents">
    <div class="inner">
        <p>ハンバーガーメニューをクリックした際に、<br>メインコンテンツ押し出されます。</p>
    </div>
</div>

ハンバーガーメニューを実装させる CSS編

CSSは、以下になります。

/* ==========================================
   ①定義
========================================== */
:root {
    --nav-toggle-height: 32px;
    --nav-toggle-color: #222222;
    --nav-toggle-open-color: #222222;
    --nav-toggle-span-height: 2px;
    --nav-background-color: #fff;
    --nav-text-color: #fff;
    --nav-link-hover-color: #666;
    --transition-duration: 0.6s;
    --transition-easing: ease-in-out;
}

/* ==========================================
   ②ハンバーガーアイコン
========================================== */
#nav-toggle {
    position: fixed;
    top: 6%;
    height: var(--nav-toggle-height);
    cursor: pointer;
    z-index: 1000;
    left: calc(50% - 600px);
}
@media (max-width: 1200px) {
    #nav-toggle {
        left: 5%;
    }
}
.open #nav-toggle {
    top: 4%;
    left: 20px;
}
#nav-toggle > div {
    position: relative;
    width: 36px;
}
#nav-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--nav-toggle-span-height);
    background: var(--nav-toggle-color);
    transition: transform var(--transition-duration) var(--transition-easing),
    top 0.5s ease;
}
#nav-toggle span:nth-child(1) {
    top: 0;
}
#nav-toggle span:nth-child(2) {
    width: 80%;
    top: calc(var(--nav-toggle-height) / 3);
}
#nav-toggle span:nth-child(3) {
    top: calc(var(--nav-toggle-height) / 3 * 2);
}

/* ==========================================
   ③開いたときのXアニメーション
========================================== */
.open #nav-toggle span {
    background: var(--nav-toggle-open-color);
}
.open #nav-toggle span:nth-child(1) {
    top: calc(var(--nav-toggle-height) / 2 - var(--nav-toggle-span-height) / 2);
    transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
    top: calc(var(--nav-toggle-height) / 2 - var(--nav-toggle-span-height) / 2);
    width: 0;
    left: 50%;
}
.open #nav-toggle span:nth-child(3) {
    top: calc(var(--nav-toggle-height) / 2 - var(--nav-toggle-span-height) / 2);
    transform: rotate(-45deg);
}

/* ==========================================
   ④グローバルナビ
========================================== */
#gloval-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 390px;
    height: 100vh;
    background: var(--nav-background-color);
    color: var(--nav-text-color);
    z-index: 990;
    text-align: left;
    padding: 5rem 4rem;
    transform: translateX(-100%);
    transition: transform var(--transition-duration) var(--transition-easing);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
}

/* ==========================================
   ⑤開いたとき
========================================== */
.open #gloval-nav {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}
#gloval-nav {
    letter-spacing: 0.08em;
}
#gloval-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 4rem;
}
#gloval-nav ul li {
    opacity: 1;
    margin-bottom: 1rem;
}
#gloval-nav ul li a {
    font-size: 2.3rem;
    font-weight: 700;
    text-decoration: none;
    display: block;
    padding: 2rem 0;
    transition: color 0.3s;
    color: #333;
}
#gloval-nav ul li a:hover {
    opacity: 0.5;
    color: var(--nav-link-hover-color);
}

/* ==========================================
   ⑥メインコンテンツ押し出し
========================================== */
#main-contents {
    width: 100%;
    height: 100vh;
    background: #f9f9f9;
    transition: transform var(--transition-duration) var(--transition-easing);
}
.open #main-contents {
    transform: translateX(280px);
    transition: transform 0.6s var(--transition-easing);
}
/*---------ここは自由に------------*/
.inner {
    width: 1000px;
    margin: 0 auto;
}
.inner p {
    font-size: 20px;
    font-weight: bold;
    padding-top: 5rem;
}

/* ==========================================
   ⑦スクロール無効化
========================================== */
.open body {
    overflow: hidden;
}

●①定義: :rootセレクタを使用しています。
「root」を指定する事で、後から色やサイズの変更が必要になった場合、この:rootの中の定義を一行修正するだけで、サイト全体にその変更を反映させることができます。

●②ハンバーガーアイコン: #nav-toggleを位置を指定します。
マーク（≡）のことです。

●③開いたときのXアニメーション: .openを付与します。こちらは次の「js」になります。
transform: rotate(45deg)を指定することにより、
1本目と3本目を(≡)から(X)マークに変わるアニメーションを実行させます。
2本目は、width: 0 left: 50%で線を消します。

●④グローバルナビ: #gloval-navは、開い際のコンテンツの位置、横幅、高さ、背景色などの指定が可能になります。
自由に変更可能です。

●⑤開いたとき: #gloval-navの、開い際のコンテンツのレイアウト用のCSSになります。
navやbtnを追加した際には、CSSを追加してください。

●⑥メインコンテンツ押し出し: .open #main-contentsは、「open=開いた際」に「translateX(方向)=280」移動します。
上記の記述をがない場合は、「#nav-toggle」が「#main-contents」に被ります。
被るパターンを使用する場合は、「⑥メインコンテンツ押し出し」のコードは削除しても問題ありません。

●⑦スクロール無効化: overflow: hiddenでスクロール無効化しております。

ハンバーガーメニューを実装させる js編

ここでは、CSSにあったクリックした際に「open」を付与します。
jsは、以下になります。

(function($) {
    $(function () {
        $('#nav-toggle').on('click', function() {
            $('body').toggleClass('open');
        });
    });
})(jQuery);

まとめ

今回はこれで以上です。

POINT

今回はハンバーガーメニューの作り方についてまとめました。
HTMLは、ナビゲーション、コンテンツのエリアを用意してください。
CSS、①〜⑦を解説いたしました。
⑥メインコンテンツ押し出しは、translateX(方向)に移動します。被るパターンを使用する場合は、「⑥メインコンテンツ押し出し」のコードは削除しても問題ありません。
jsで「open」を付与します。
こちらに「ハンバーガーメニュー」デモサイトを用意しました。