今回はよく使うハンバーガーメニューの開閉です。
いろんな方法があると思いますが、個人的にはこの方法がやりやすいなというのをご紹介します。
ハンバーガーメニューの開閉のコード解説
今回紹介するコードは、このサイトのスマホ版にあるハンバーガーメニューです。
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）を同じ階層にしておいて、親にクラス名を付け外ししてアニメーションさせるというところでした。
使いどこがあればぜひ使ってみてください。
