Top

メモ書き

ハンバーガーメニューの開閉と実装方法を解説！

  • JavaScript
  • WordPress
  • アニメーション
  • 主のメモ

2024.01.24

今回はよく使うハンバーガーメニューの開閉です。
いろんな方法があると思いますが、個人的にはこの方法がやりやすいなというのをご紹介します。

ハンバーガーメニューの開閉のコード解説

今回紹介するコードは、このサイトのスマホ版にあるハンバーガーメニューです。
PCで見ている方はウィンドウを縮めてご確認ください。

<div class="gnNav blogNav">
    <div class="bgCircle"></div>
    <div class="gnNav__btn">
        <div>
            <span></span>
            <span></span>
        </div>
    </div>
    <ul class="gnNav__list">
        <!-- 開いたときの内容 -->
    </ul>
</div>

HTMLのポイントは.gnNav__btnと.gnNav__listを同じ階層にしておくことですかね。

.gnNav {
    .bgCircle {
        position: fixed;
        z-index: 100;
        top: 5.1282051282vw;
        right: 5.1282051282vw;
        width: 20.5128205128vw;
        height: 20.5128205128vw;
        border-radius: 50%;
        border: 4px solid $color_black;
        background-color: $color_yellow;
        transition: all .3s ease;
        transform: translate(50%,-50%);
    }
    &__btn {
        position: fixed;
        z-index: 101;
        top: 0vw;
        right: 0vw;
        width: 17.9487179487vw;
        height: 17.9487179487vw;
        padding: 5.1282051282vw 2.5641025641vw 0vw 7.6923076923vw; 

        div {
            position: relative;

            span {
                display: block;
                position: absolute;
                width: 100%;
                border-radius: 50vw;
                transition: all .3s ease;
                background-color: #000;
                transform-origin: center center;
                left: 0;
                height: 0.5128205128vw;
                
                &:nth-of-type(1) {
                    top: 0vw;
                }
                &:nth-of-type(2) {
                    top: 2.0512820513vw;
                }
            }
        }
    }
    
    /* #nav-toggle 切り替えアニメーション */
    &.gnOpen {
        .bgCircle {
            top: 12.8205128205vw;
            right: 5.1282051282vw;
            width: 128.2051282051vw;
            height: 128.2051282051vw;
        }
        .gnNav__btn {
            
            div {
                position: relative;
    
                span {                
                    &:nth-of-type(1) {
                        -webkit-transform: rotate(345deg);
                        -moz-transform: rotate(345deg);
                        transform: rotate(345deg);
                        top: 1.0256410256vw;
                    }
                    &:nth-of-type(2) {
                        -webkit-transform: rotate(-345deg);
                        -moz-transform: rotate(-345deg);
                        transform: rotate(-345deg);
                        top: 1.0256410256vw;
                    }
                }
            }
        }
    }
}

scssはこんな感じ。
ポイントは.gnNavと同じところに.gnOpenがついた時に変化するように書くところ。

const btnMenu = document.querySelector('.gnNav__btn');

btnMenu.addEventListener('click', function() {
    this.parentNode.classList.toggle('gnOpen');
});

let gnLink = document.querySelectorAll('.gnNav__list a');
const header = document.querySelector(".gnNav");

for(let i = 0; i < gnLink.length; i++) {
    gnLink[i].addEventListener('click', function() {
        header.classList.remove('gnOpen');
    });
}

scssで書いたのが機能するように、.gnNavに.gnOpenつくようするのが目標。
.gnNav__btnをクリックすると、親要素の.gnNavにクラス名が付いたり消えたりします。

ちなみに8行目以降は、ページの途中に飛ぶリンクがある場合に書いておいた方がいいかと。
ページ内にリンクした時、グローバルナビが開きっぱなしになるのを防ぎます。

今回紹介したかったのは、ボタン（.gnNav__btn）と開いた際のグローバルナビ（.gnNav__list）を同じ階層にしておいて、親にクラス名を付け外ししてアニメーションさせるというところでした。
使いどこがあればぜひ使ってみてください。

関連記事

一覧に戻る