JavaScript入門: クリックイベントで学ぶハンバーガーメニューの作り方

See the Pen ハンバーガーメニュー01 by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

See the Pen ハンバーガーメニュー02 by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

See the Pen ハンバーガーメニュー03 by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

document.addEventListener('click', (e) => { ... })

• document.addEventListener
  • ドキュメント全体にクリックイベントを登録します。この場合、どこをクリックしてもこのイベントが発動します。
  • 第一引数 'click' は「クリックしたときに発動するイベント」を指定しています。
  • 第二引数 (e) => { ... } は、イベントが発生したときに実行する処理（イベントハンドラ）を記述する部分です。
• (e) =>（アロー関数）
  • ここでの e は「イベントオブジェクト」と呼ばれるものです。
  • イベントオブジェクトには、「どこをクリックしたか」「クリックされた要素は何か」といった情報が含まれています。
  • たとえば、e.target は、ユーザーがクリックした実際のHTML要素を指します。

if (!menu.contains(e.target) && !hamburger.contains(e.target))

• e.target
  • ユーザーがクリックした要素を指します。
  • たとえば、メニュー内のリンクをクリックした場合は、そのリンク（<a>要素）が e.target となります。
• menu.contains(e.target)
  • menu.contains() は、クリックされた要素（e.target）が menu の中に含まれているかを確認します。
  • 含まれていれば true、含まれていなければ false を返します。
• hamburger.contains(e.target)
  • 同様に、クリックされた要素（e.target）が hamburger の中に含まれているかを確認します。
• if (!menu.contains(e.target) && !hamburger.contains(e.target))
  • ! は「否定」を表す記号です。
  • この条件は、「クリックされた要素がメニューやハンバーガーアイコンの中に 含まれていない場合」を意味します。

See the Pen ハンバーガーメニュー04 by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

See the Pen ハンバーガーメニュー05 by Yoshiko Nakamura (@Yoshiko-Nakamura) on CodePen.

HTMLの解説

<div class="hamburger" aria-expanded="false" role="button" tabindex="0">
  ☰
</div>
<nav class="menu" aria-hidden="true">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

1. aria-expanded="false"
   • ハンバーガーメニューが開いている状態かどうかを示します。
   • false: メニューが閉じている。
   • true: メニューが開いている。
2. role="button"
   • ハンバーガーアイコンが「ボタン」であることをスクリーンリーダーに伝えます。
3. tabindex="0"
   • ハンバーガーアイコンをキーボードのタブキーでフォーカス可能にします。
4. aria-hidden="true"
   • メニューの表示状態が非表示であることを示します。
   • true: 非表示。
   • false: 表示。

CSSの解説

.hamburger {
  font-size: 32px;
  cursor: pointer;
  display: block;
  z-index: 1000; /* メニューより前面に配置 */
}

.menu {
  transform: translateX(100%);
  transition: transform 0.5s ease, visibility 0.5s ease;
  background-color: #ddd;
  position: fixed;
  top: 0;
  right: 0;
  width: 250px;
  height: 100%;
  z-index: 999;
  visibility: hidden; /* 初期状態で非表示 */
}

1. transform: translateX(100%);
   • メニューを画面の右外に隠します。
2. transition: transform 0.5s ease, visibility 0.5s ease;
   • transformによるスライドアニメーションと、visibilityの切り替えにアニメーションを適用。開く時のアニメーションと閉じる時のアニメーション。
3. visibility: hidden;
   • 初期状態でメニューを視覚的に隠します。

メニューが表示されたとき

.menu.active {
  transform: translateX(0);
  visibility: visible;
}

1. transform: translateX(0);
   • メニューを画面内にスライドインします。
2. visibility: visible;
   • メニューを視覚的に表示します。

レスポンシブ対応（PC画面）

@media (min-width: 768px) {
  .hamburger {
    display: none;
  }

  .menu {
    transform: none;
    position: static;
    display: flex;
    background-color: transparent;
    height: auto;
    visibility: visible;
  }

  .menu ul {
    display: flex;
    gap: 20px;
  }
}

1. PC画面での動作
   • ハンバーガーアイコンは非表示。
   • メニューは常時横並びで表示されます。
2. transform: none;
   • スライドアニメーションを解除。

JavaScriptの解説

hamburger.addEventListener('click', () => {
  const isExpanded = hamburger.getAttribute('aria-expanded') === 'true';

  // aria属性の更新
  hamburger.setAttribute('aria-expanded', !isExpanded);
  menu.setAttribute('aria-hidden', isExpanded ? 'true' : 'false');

  // メニュー表示の切り替え
  menu.classList.toggle('active');
});

1. aria-expandedの更新
   • 現在の状態を確認し、trueまたはfalseを切り替えます。
2. menu.classList.toggle('active')
   • メニューのactiveクラスを切り替え、表示・非表示を制御。