ハンバーガーメニューの実装手順と仕組み

JavaScript(ジャバスクリプト)

2026.04.28

この記事は約5分で読めます。

スマートフォン用「3本線モバイルメニュー（ハンバーガーメニュー）」は、Web制作の基本である HTML（構造）、CSS（見た目とアニメーション）、JavaScript（動きと状態の切り替え） の3つの技術を組み合わせて作られています。

それぞれの役割と仕組みを解説します。

1. HTML（header.php）の役割
2. CSS（style.css）の役割
3. JavaScript（script.js）の役割
まとめ

1. HTML（header.php）の役割

「ボタンの部品」と「メニューの枠」を準備する

まず、ヘッダーの中に「3本線のボタン」を追加し、ナビゲーションメニューに「JavaScriptから操作するための名札（ID）」をつけました。

<!-- 3本線のボタン部分 -->
<button class="mobile-menu-btn" id="mobile_menu_btn" aria-label="Toggle Menu">
    <span></span><!-- 1本目の線 -->
    <span></span><!-- 2本目の線 -->
    <span></span><!-- 3本目の線 -->
</button>

<!-- ナビゲーションメニュー。操作しやすいように id="main-nav" を付与 -->
<nav id="main-nav">
    <a href="/">HOME</a>
    <a href="/guide/">ご利用案内</a>
    ...
</nav>

3つの <span> タグが、CSSで装飾されることで「3本の線」になります。

2. CSS（style.css）の役割

「PCとスマホで表示を切り替え」「スライド・バツ印のアニメーションを作る」

CSSには大きく分けて3つの仕掛けがあります。

仕掛け①：スマホの時だけボタンを表示する

PC画面では邪魔になるため、通常は display: none; で隠しておき、スマホサイズ（画面幅768px以下）の時だけ表示させます。

仕掛け②：メニューを画面外に隠しておく

スマホサイズになった際、メニュー画面（#main-nav）は position: fixed; で画面の右上に固定します。

しかし、初期状態では right: -100%; と設定しておくことで、画面の右端よりさらに外側に隠れて見えない状態になります。

#main-nav {
    position: fixed;
    top: 0;
    right: -100%; /* 初期状態は画面の右外に隠す */
    width: 250px;
    height: 100vh; /* 画面いっぱいの高さ */
    transition: right 0.3s ease; /* 0.3秒かけて滑らかに動かす設定 */
}

/* activeクラスが付くと、画面内にスライドしてくる */
#main-nav.active {
    right: 0;
}

仕掛け③：ハンバーガーを「バツ印（✖）」に変形させる

JavaScriptでボタンに .active クラスが付与されたとき、3本のそれぞれの線を回転させたり消したりして「✖」の形を作ります。

/* 1本目の線を下にズラして45度回転 */
.mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
/* 2本目（真ん中）の線は透明にして消す */
.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}
/* 3本目の線を上にズラしてマイナス45度回転 */
.mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

3. JavaScript（script.js）の役割

「クリックされたらクラス（状態）を付け外す」

CSSだけでは「クリックを感知する」ことができないため、JSを使います。ボタンがクリックされたら、HTMLに .active クラスを付けたり外したり（トグル機能）します。これによってCSSの right: 0; や rotate(45deg); が発動します。

// ボタンとメニューの要素を取得
const mobileMenuBtn = document.getElementById('mobile_menu_btn');
const mainNav = document.getElementById('main-nav');

// ボタンがクリックされたら実行
mobileMenuBtn.addEventListener('click', () => {
    // それぞれに "active" という状態を 付与/解除 する
    mobileMenuBtn.classList.toggle('active');
    mainNav.classList.toggle('active');
    
    // 背景がスクロールしないように body にもクラスを付与
    document.body.classList.toggle('menu-open');
});