メニュー

当サイト使用テーマ・サーバー

\ SWELL【WordPressテーマ】 /

\ レンタルサーバー【ConoHa WING】 /

プログラミング学習

美容・脱毛

ホームページ制作

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

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

目次

完成形

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

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

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

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. 1番目のアニメーション (hamburger.active):
    • クリックされた際にハンバーガーアイコンが “×” の形に変化するアニメーションです。1つ目の横棒が左上に傾斜し、2つ目と3つ目の横棒が右上に傾斜します。
  2. 2番目のアニメーション (hamburger.opacity):
    • クリックされた際にハンバーガーアイコンがフェードアウトするアニメーションです。2つ目の横棒が透明になり、他の2つの横棒が角度を変えて回転します。
  3. 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');
});
  1. ハンバーガーアイコンを取得:
    document.querySelectorAll('.hamburger') は、.hamburger クラスを持つすべての要素を取得し、それぞれのハンバーガーアイコンを配列 hamburger に格納します。

  2. 1番目のハンバーガーアイコンにクリックイベントを追加:
    1番目のハンバーガーアイコン(インデックス 0 の要素)にクリックイベントを追加します。クリックされると、active クラスがトグルされることで1番目のアニメーション効果が適用されます。

  3. 2番目のハンバーガーアイコンにクリックイベントを追加:
    2番目のハンバーガーアイコン(インデックス 1 の要素)にクリックイベントを追加します。クリックされると、opacity クラスがトグルされることで2番目のアニメーション効果が適用されます。

  4. 3番目のハンバーガーアイコンにクリックイベントを追加:
    3番目のハンバーガーアイコン(インデックス 2 の要素)にクリックイベントを追加します。クリックされると、rotate クラスがトグルされることで3番目のアニメーション効果が適用されます。

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次