【JavaScript】ハンバーガーメニュー動き3種

2023年8月27日

この記事では、ハンバーガーメニューをクリックしたときの動きを３種類紹介していきます。

完成形

まずは完成形を見ていきましょう。

上から３種類のハンバーガーメニューがあると思います。

それぞれクリック又は画面をタップしてハンバーガーメニューの動きを確認しましょう。

See the Pen js-09 by aqua (@aqua-programdiary) on CodePen.

HTMLコーディング

最初にHTMLのコーディングをしていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="hamburger">
        <span></span>
        <span></span>
        <span></span>
    </div>

<script src="main.js"></script>
</body>
</html>

各 <div class="hamburger"> 要素内には <span> 要素が3つ含まれており、これらの <span> 要素がハンバーガーアイコンの横棒を表現しています。ハンバーガーアイコンは通常、メニューの展開・折り畳みを行うためのアイコンとして使われます。

CSSスタイルを適用してハンバーガーアイコンを見栄え良くすることができます。JavaScriptを使用して、ハンバーガーアイコンがクリックされた際のメニューの表示・非表示などの動作を実装することも可能です。

CSSコーディング

次にCSSのコーディングでハンバーガーメニューのスタイルを設定していきます。

@charset 'utf-8';

/* 共通設定 */
.hamburger {
    width: 100px;
    height: 100px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    margin: 0 auto;
}

.hamburger span {
    width: 50px;
    height: 2px ;
    background: #333;
    position: absolute;
    left: 25px;
    transition: all 0.3s ease-in-out;
}

.hamburger span:nth-child(1) {
    top: 36px;
}
.hamburger span:nth-child(2) {
    top: 50px;
}
.hamburger span:nth-child(3) {
    top: 64px;
}

/* 1番目 */
.hamburger.active span:nth-child(1) {
    top: 47px;
    left: 25px;
    background :#333;
    transform: rotate(-45deg);
}
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
    top: 47px;
    background: #333;
    transform: rotate(45deg);
}

/* 2番目 */
.hamburger.opacity span:nth-child(1) {
    top: 47px;
    left: 25px;
    background :#333;
    transform: rotate(-45deg);
}
.hamburger.opacity span:nth-child(2) {
    opacity: 0;
}
.hamburger.opacity span:nth-child(3) {
    top: 47px;
    background: #333;
    transform: rotate(45deg);
}

/* 3番目 */
.hamburger.rotate span:nth-child(1) {
    top: 47px;
    left: 25px;
    background :#333;
    transform: rotate(-405deg);
}
.hamburger.rotate span:nth-child(2) {
    opacity: 0;
}
.hamburger.rotate span:nth-child(3) {
    top: 47px;
    background: #333;
    transform: rotate(405deg);
}

1番目のアニメーション (hamburger.active):
- クリックされた際にハンバーガーアイコンが “×” の形に変化するアニメーションです。1つ目の横棒が左上に傾斜し、2つ目と3つ目の横棒が右上に傾斜します。
2番目のアニメーション (hamburger.opacity):
- クリックされた際にハンバーガーアイコンがフェードアウトするアニメーションです。2つ目の横棒が透明になり、他の2つの横棒が角度を変えて回転します。
3番目のアニメーション (hamburger.rotate):
- クリックされた際にハンバーガーアイコンが回転するアニメーションです。1つ目の横棒が左に回転し、2つ目の横棒が消え、3つ目の横棒が右に回転します。

JavaScriptコーディング

最後にJavaScriptでクリックイベントを実装して完成です。

const hamburger=document.querySelectorAll('.hamburger');
hamburger[0].addEventListener('click',function(){
hamburger[0].classList.toggle('active');
});
hamburger[1].addEventListener('click',function(){
hamburger[1].classList.toggle('opacity');
});
hamburger[2].addEventListener('click',function(){
hamburger[2].classList.toggle('rotate');
});

ハンバーガーアイコンを取得:
document.querySelectorAll('.hamburger') は、.hamburger クラスを持つすべての要素を取得し、それぞれのハンバーガーアイコンを配列 hamburger に格納します。
1番目のハンバーガーアイコンにクリックイベントを追加:
1番目のハンバーガーアイコン（インデックス 0 の要素）にクリックイベントを追加します。クリックされると、active クラスがトグルされることで1番目のアニメーション効果が適用されます。
2番目のハンバーガーアイコンにクリックイベントを追加:
2番目のハンバーガーアイコン（インデックス 1 の要素）にクリックイベントを追加します。クリックされると、opacity クラスがトグルされることで2番目のアニメーション効果が適用されます。
3番目のハンバーガーアイコンにクリックイベントを追加:
3番目のハンバーガーアイコン（インデックス 2 の要素）にクリックイベントを追加します。クリックされると、rotate クラスがトグルされることで3番目のアニメーション効果が適用されます。

これにより、各ハンバーガーアイコンをクリックすることで異なるアニメーション効果が適用されるようになります。例えば、1番目のハンバーガーアイコンをクリックすると active クラスが付与されて1番目のアニメーションが発生します。同様に、2番目のハンバーガーアイコンをクリックすると opacity クラスが付与されて2番目のアニメーションが発生し、3番目のハンバーガーアイコンをクリックすると rotate クラスが付与されて3番目のアニメーションが発生します。

リンク

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！