初心者も安心！webサイトのハンバーガーメニュー基本と実装方法ガイド

2025 12/05

2025/12/05

はじめに

目的

この文書は、Webサイトでよく使われるハンバーガーメニューの基本的な実装方法をわかりやすく解説します。HTMLの三本線ボタンとナビゲーションリストを用意し、CSSで見た目や表示制御を行い、必要に応じてJavaScriptで動作を補助する手順を紹介します。

対象読者

HTMLとCSSの基礎がある方を想定します。JavaScriptは必須ではありませんが、簡単なクリック処理が理解できると実装がスムーズです。

本書で扱うこと

構造（HTML）の作り方
見た目・開閉の制御（CSS）の基本
クリックや開閉の動き（JavaScript）の簡単な例
JavaScriptを使わない実装のヒント

前提と目標

シンプルでアクセシブルなメニューを作ることを目標とします。スマホやタブレットでも使いやすいよう、レスポンシブを意識した説明を行います。

基本の仕組み

概要

ハンバーガーメニューは、画面幅が狭いときにナビゲーションをアイコン（≡）にまとめ、タップやクリックで展開する仕組みです。実装は「ボタンとなる要素」「隠しておくメニュー」「開閉を切り替えるスタイル・スクリプト」の3つをセットで考えます。

1) ボタンとなる要素

ボタンは

2) 隠しておくメニュー

メニューは

や

3) 開閉を切り替えるスタイル・スクリプト

ボタンの押下でクラスを切り替え、CSSで表示・非表示を制御します。シンプルな流れは「ボタン押下→aria-expanded切替→メニューにis-openを付与→CSSで表示」。アニメーションはopacityやtransformを使うと滑らかになります。

アクセシビリティのポイント

フォーカス順を保ち、キーボードで開閉できるようにします。開いたときはメニュー内の最初の項目にフォーカスを移すと親切です。スクリーンリーダー向けにaria-controlsやaria-expandedを正しく更新してください。

見た目と動きのヒント

・開閉は急すぎないようにトランジションを0.2〜0.3秒にする。・アイコンの見た目は開閉で変化を付けると分かりやすい。・十分なタップ領域（44〜48px程度）を確保する。

実装手順の流れ

準備

まずHTMLに三本線ボタンとメニューのリストを用意します。ボタンはdivやbuttonの中にspanを3つ並べるだけでOKです。

HTML（例）

<button class="hamburger" aria-expanded="false" aria-label="メニュー">
  <span></span>
  <span></span>
  <span></span>
</button>
<ul class="menu">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

CSSの要点

spanを横線に見えるよう幅・高さ・背景色を指定します。
メニューはデフォルトで非表示にします（display:noneやheight:0を使用）。
開閉アニメーションはtransitionで滑らかにします。

.hamburger span{display:block;width:30px;height:3px;background:#333;margin:6px 0;transition:all .3s}
.menu{display:none}
.hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.menu.open{display:block}

JavaScriptでの動き

クリックイベントを監視し、ボタンとメニューにクラスを付け外しします。aria-expandedも更新するとアクセシビリティが向上します。

const btn=document.querySelector('.hamburger');
const menu=document.querySelector('.menu');
btn.addEventListener('click',()=>{
  const opened=btn.classList.toggle('open');
  menu.classList.toggle('open');
  btn.setAttribute('aria-expanded', opened);
});

注意点

タッチ操作で押しやすいサイズにします。
アニメーションは短めにして操作感を良くします。
display:noneの代わりに高さや透明度を使うとトランジションが滑らかになります。

JavaScriptのパターン

プレーンなJavaScript（querySelector + classList.toggle）

プレーンなJavaScriptでは、要素を取得してクリックでクラスを切り替える実装が基本です。記述は短く分かりやすいため、小さなメニューやアコーディオンに向きます。

例：

const btn = document.querySelector('.js-toggle-btn');
const panel = document.querySelector('.js-panel');
btn.addEventListener('click', () => {
  panel.classList.toggle('is-open');
  btn.setAttribute('aria-expanded', panel.classList.contains('is-open'));
});

ポイントは、見た目はCSSで制御しておき、開閉の状態はクラスで管理することです。キーボード操作やaria属性も同時に更新するとアクセシビリティが高まります。

jQuery（on(‘click’) と slideToggle）

jQueryを使う場合はイベントとアニメーションが簡単に書けます。slideToggle()で高さの変化を自然に見せられます。

例：

$('.js-toggle-btn').on('click', function() {
  $(this).toggleClass('is-open');
  $(this).next('.js-panel').stop(true).slideToggle(200);
});

stop(true)は連続クリックでアニメーションが重ならないようにします。アニメーション時間は200〜300ms程度が目安です。

実装時の注意点

イベントは必要最小限にする（同じ要素に重複登録しない）。
アニメーションは短めにして操作感を損ねない。
表示・非表示はCSSで行い、状態はクラスやariaで表現する。
多数のリストに対してはイベント委譲（親に一つのリスナー）を検討する。

HTML・CSSだけでの実装

仕組み

checkboxとlabelを使い、:checked擬似クラスで見た目を切り替えます。input（checkbox）を画面上は見えなくし、labelをハンバーガーアイコンにしてクリックでチェックを切り替えます。CSSで隣接セレクタや兄弟セレクタを使い、メニューの表示・非表示を制御します。

HTML例

<input type="checkbox" id="menu-toggle" class="visually-hidden">
<label for="menu-toggle" class="hamburger" aria-hidden="false">☰</label>
<nav class="menu"> ... </nav>

視覚的に隠す際はdisplay:noneを使わず、スクリーンリーダーに残す「visually-hidden」方式を使います。

CSS例

.visually-hidden{position:absolute;left:-9999px}
.menu{display:none;transition:opacity .2s}
#menu-toggle:checked + .hamburger + .menu{display:block;opacity:1}
.hamburger{cursor:pointer}