【初心者向け】ハンバーガーメニューとは？作り方とアクセシビリティ対応まで徹底解説

May 18, 2025June 10, 2025

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

ハンバーガーメニューは、画面のスペースを有効活用するために使われる三本線のアイコンメニューのことです。特にスマホやタブレットのような小さい画面で多用され、ユーザーが操作しやすいナビゲーションを提供します。クリックやタップでメニューが開閉し、画面をすっきり見せながらも必要なリンクを提供できる優れたUIパターンです。

ハンバーガーメニューのHTML構造と基本コード

ハンバーガーメニューは、主に以下のような要素で構成します。

メニューボタン（ハンバーガーアイコン）：クリックできるボタンとして実装します。
メニューリスト：隠れているリンクリスト。ボタンの操作で表示・非表示を切り替えます。
アクセシビリティ対応：WAI-ARIA属性を付与し、支援技術でも使いやすくします。

以下はシンプルな基本構造の例です。

<nav id="global-menu" role="navigation" aria-label="グローバルナビゲーション">
  <button id="menu-toggle" aria-expanded="false" aria-controls="menu-list" aria-label="メインメニューを開閉">
    <!-- SVGで三本線のハンバーガーアイコン -->
    <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
      <rect y="4" width="24" height="2" fill="#333"></rect>
      <rect y="11" width="24" height="2" fill="#333"></rect>
      <rect y="18" width="24" height="2" fill="#333"></rect>
    </svg>
  </button>
  <ul id="menu-list" hidden>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">サービス</a></li>
    <li><a href="#">会社情報</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

<button>で操作ボタンを作り、aria-expanded属性でメニューの開閉状態を示します。
メニューリストは最初はhidden属性で非表示にしています。

CSSでハンバーガーメニューをスタイリング

スマホ表示を想定しつつ、レスポンシブ対応も簡単にできます。

#menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

#menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none; /* 初期は非表示 */
}

#menu-list li {
  margin: 8px 0;
}

#menu-list li a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

/* メニューが開いた時 */
#menu-list[aria-expanded="true"],
#menu-list:not([hidden]) {
  display: block;
}

/* デスクトップ以上の画面ではメニューを常に表示 */
@media screen and (min-width: 768px) {
  #menu-toggle {
    display: none; /* ボタン非表示 */
  }
  #menu-list {
    display: flex !important;
    gap: 20px;
  }
  #menu-list li {
    margin: 0;
  }
}

JavaScriptでメニュー開閉を制御

ボタンのクリックでaria-expandedとhidden属性を切り替えます。

document.addEventListener('DOMContentLoaded', () => {
  const menuToggle = document.getElementById('menu-toggle');
  const menuList = document.getElementById('menu-list');

  menuToggle.addEventListener('click', () => {
    const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
    menuToggle.setAttribute('aria-expanded', String(!expanded));
    if (expanded) {
      menuList.setAttribute('hidden', '');
    } else {
      menuList.removeAttribute('hidden');
    }
  });
});