【JavaScript】ハンバーガーメニューの実装方法｜CSS アニメーション・オーバーレイ・アクセシビリティ・レスポンシブ対応まで解説

<header class="header">
  <a href="/" class="header-logo">MySite</a>

  <!-- ハンバーガーボタン -->
  <button class="hamburger" id="hamburger"
          aria-controls="nav-menu"
          aria-expanded="false"
          aria-label="メニューを開く">
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
    <span class="hamburger-line"></span>
  </button>

  <!-- ナビゲーション -->
  <nav class="nav-menu" id="nav-menu">
    <ul class="nav-list">
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">会社概要</a></li>
      <li><a href="#service">サービス</a></li>
      <li><a href="#contact">お問い合わせ</a></li>
    </ul>
  </nav>

  <!-- オーバーレイ（背景暗転） -->
  <div class="overlay" id="overlay"></div>
</header>

/* ハンバーガーボタン */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 110;
}

/* 三本線の各ライン */
.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: #333;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* メニューが開いた時: 三本線 → × に変形 */
.hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ナビゲーションメニュー */
.nav-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transform: translateX(100%); /* 画面外に隠す */
  transition: transform 0.3s ease;
  z-index: 100;
  padding: 80px 24px 24px;
  overflow-y: auto;
}

/* メニューが開いた状態 */
.nav-menu.is-open {
  transform: translateX(0); /* 画面内にスライドイン */
}

/* メニューリスト */
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list li {
  border-bottom: 1px solid #eee;
}

.nav-list a {
  display: block;
  padding: 16px 0;
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

.nav-list a:hover {
  color: #0284c7;
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 90;
}

/* オーバーレイが表示された状態 */
.overlay.is-open {
  opacity: 1;
  visibility: visible;
}

document.addEventListener("DOMContentLoaded", () => {
  const hamburger = document.getElementById("hamburger");
  const navMenu = document.getElementById("nav-menu");
  const overlay = document.getElementById("overlay");

  // メニューの開閉を切り替える
  function toggleMenu() {
    const isOpen = hamburger.classList.toggle("is-open");
    navMenu.classList.toggle("is-open");
    overlay.classList.toggle("is-open");

    // アクセシビリティ: 開閉状態を通知
    hamburger.setAttribute("aria-expanded", isOpen);
    hamburger.setAttribute("aria-label", isOpen ? "メニューを閉じる" : "メニューを開く");

    // メニュー開閉時にスクロールを制御
    document.body.style.overflow = isOpen ? "hidden" : "";
  }

  // メニューを閉じる
  function closeMenu() {
    hamburger.classList.remove("is-open");
    navMenu.classList.remove("is-open");
    overlay.classList.remove("is-open");
    hamburger.setAttribute("aria-expanded", "false");
    hamburger.setAttribute("aria-label", "メニューを開く");
    document.body.style.overflow = "";
  }

  // ハンバーガーボタンをクリック
  hamburger.addEventListener("click", toggleMenu);

  // オーバーレイをクリックで閉じる
  overlay.addEventListener("click", closeMenu);

  // メニュー内リンクをクリックで閉じる
  navMenu.querySelectorAll("a").forEach(link => {
    link.addEventListener("click", closeMenu);
  });

  // Esc キーで閉じる
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape") closeMenu();
  });
});

document.addEventListener("click", (e) => {
  // メニューまたはハンバーガーボタンの内部であれば何もしない
  if (navMenu.contains(e.target) || hamburger.contains(e.target)) {
    return;
  }
  // それ以外の場所がクリックされたらメニューを閉じる
  closeMenu();
});

/* ヘッダーの基本レイアウト */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 120;
}

/* PC幅: 768px以上 */
@media (min-width: 768px) {
  /* ハンバーガーボタンを非表示 */
  .hamburger {
    display: none;
  }

  /* オーバーレイを非表示 */
  .overlay {
    display: none;
  }

  /* ナビメニューを通常表示 */
  .nav-menu {
    position: static;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    transform: none;
    transition: none;
    padding: 0;
    overflow: visible;
  }

  /* リストを横並びに */
  .nav-list {
    display: flex;
    gap: 24px;
  }

  .nav-list li {
    border-bottom: none;
  }
}

function trapFocus(menuElement) {
  const focusableElements = menuElement.querySelectorAll(
    'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
  );
  const firstElement = focusableElements[0];
  const lastElement = focusableElements[focusableElements.length - 1];

  menuElement.addEventListener("keydown", (e) => {
    if (e.key !== "Tab") return;

    if (e.shiftKey) {
      // Shift+Tab: 最初の要素から戻ったら最後にループ
      if (document.activeElement === firstElement) {
        e.preventDefault();
        lastElement.focus();
      }
    } else {
      // Tab: 最後の要素から進んだら最初にループ
      if (document.activeElement === lastElement) {
        e.preventDefault();
        firstElement.focus();
      }
    }
  });
}

// メニューを開いたときにフォーカストラップを有効化
// trapFocus(navMenu);