ハンバーガーメニューとは

三本線のアイコンをタップすると、隠れていたメニューが開く仕組み。

概要

画面の余白が少ないスマートフォンなどで、ナビゲーションメニューを普段は隠しておき、三本線のアイコン（ボタン）をタップしたときだけ表示する仕組みです。アイコンの見た目が食べ物のハンバーガー（パン・具・パン）に似ていることから、この名前が付きました。

AI に「ハンバーガーメニューを付けて」と頼むと、ヘッダーに三本線ボタンを置き、クリックでナビゲーションの開閉を切り替えるコードが返ってきます。

別名

表記ゆれ：三本線メニュー、ハンバーガーボタン、ハンバーガーアイコン、hamburger menu、hamburger icon

指し示す部品によって呼び方が変わります。ボタン単体を指すときは「ハンバーガーボタン」「ハンバーガーアイコン」、開いた後のメニュー全体を指すときは「ハンバーガーメニュー」と呼ぶのが一般的です。

AI への伝え方

「ハンバーガーメニューを実装して」で通じます。開閉後に横から出したい場合は、別名の「ドロワーメニュー」も合わせて伝えると、より狙った動きになります。

似たパーツとの違い

ハンバーガーメニューは「開閉のきっかけになるボタン」を指す言葉です。開いたときにどこにどう出てくるかは実装次第で、画面の横からスライドして出てくる形は「ドロワーメニュー」、画面上部から降りてくる大きなメニューは「メガメニュー」と呼ばれます。

デモ

コード

HTML

<div class="hb-menu">
  <header class="hb-menu__bar">
    <span class="hb-menu__logo">Sample Site</span>
    <button class="hb-menu__button" type="button" aria-expanded="false" aria-controls="hb-menu-panel">
      <span class="hb-menu__icon" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
      </span>
      <span class="hb-menu__label">メニュー</span>
    </button>
  </header>
  <nav id="hb-menu-panel" class="hb-menu__panel" hidden>
    <ul>
      <li><a href="#">トップ</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>
</div>

CSS

.hb-menu {
  position: relative;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  font-family: sans-serif;
}

.hb-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
}

.hb-menu__logo {
  font-weight: bold;
}

.hb-menu__button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.hb-menu__button:hover {
  background: #f2f2f2;
}

.hb-menu__icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.hb-menu__icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: #333;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* aria-expanded="true" のとき、三本線を X に変形する */
.hb-menu__button[aria-expanded="true"] .hb-menu__icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hb-menu__button[aria-expanded="true"] .hb-menu__icon span:nth-child(2) {
  opacity: 0;
}
.hb-menu__button[aria-expanded="true"] .hb-menu__icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.hb-menu__panel {
  border-top: 1px solid #ddd;
  background: #fafafa;
}

.hb-menu__panel ul {
  list-style: none;
  margin: 0;
  padding: 8px;
}

.hb-menu__panel a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: #212121;
  text-decoration: none;
}

.hb-menu__panel a:hover {
  background: #e6e6e6;
}

document.querySelectorAll(".hb-menu__button").forEach((button) => {
  button.addEventListener("click", () => {
    const panel = document.getElementById(button.getAttribute("aria-controls"));
    const isOpen = button.getAttribute("aria-expanded") === "true";
    button.setAttribute("aria-expanded", String(!isOpen));
    if (panel) panel.hidden = isOpen;
  });
});