JavaScriptでハンバーガーメニューを作る方法

この記事では、JavaScriptを使ってハンバーガーメニューを実装する方法を、初心者向けにわかりやすく解説します。HTML・CSS・JavaScriptをすべてコピペで使えるようにまとめています。スマホサイトでよく使うUIなので、Web制作の基礎として必ず覚えておきましょう。

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

ハンバーガーメニューとは、スマホや小さい画面でよく使われる「三本線のアイコン」で、タップするとメニューが開く仕組みのことです。画面をスッキリ見せつつ、必要なページへアクセスしやすいのがメリットです。

なぜスマホサイトでよく使われる？

• 画面上のスペースを節約できる
• ナビゲーションを隠せるのでデザインがスッキリ
• 世界中のユーザーにとって見慣れた UI

基本の仕組み

ハンバーガーアイコンをクリックすると、JavaScriptでメニューに active クラスを付けたり外したりして開閉を制御します。

完成デモ（今回作るもの）

See the Pen
Untitled by 広瀬和哉 (@lpvcfdes-the-styleful)
on CodePen.

• ハンバーガーアイコンをクリック → メニューが開く
• もう一度クリックすると閉じる
• 背景をタップしたら閉じる処理も追加

HTMLの書き方（コピペOK）

<header class="header">
  <div class="hamburger" id="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <nav class="global-nav" id="global-nav">
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">サービス</a></li>
      <li><a href="#">料金</a></li>
      <li><a href="#">お問い合わせ</a></li>
    </ul>
  </nav>

  <div class="overlay" id="overlay"></div>
</header>

最低限の構成はこれだけです。

CSSの書き方（デザイン自由に変更OK）

/* ハンバーガーアイコン */
.hamburger {
width: 28px;
cursor: pointer;
position: relative;
z-index: 1001;
}

.hamburger span {
display: block;
height: 3px;
background: #333;
margin: 5px 0;
transition: 0.3s;
}

.hamburger.active span {
    background: #fff;
}

/* メニュー */
.global-nav {
position: fixed;
top: 0;
right: -250px;
width: 250px;
height: 100%;
background: #fff;
transition: 0.3s;
padding-top: 60px;
z-index: 1000;
}

/* ============================
   ハンバーガーメニュー中身デザイン
============================ */

/* ナビゲーション内・リスト */
.global-nav ul {
  padding: 0;
  margin: 0;
}

.global-nav li {
  list-style: none;
  margin-bottom: 15px;
  text-align: left;
}

/* メニューリンク */
.global-nav a {
  display: block;
  padding: 14px 20px;
  color: #333;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* hover */
.global-nav a:hover {
  background: #eef4ff;
  color: #0055ff;
  transform: translateX(5px);
}

/* activeでスッと右から出る */
.global-nav.active {
  right: 0;
}

/* 見出し風（オプションで付けたい場合） */
.global-nav-title {
  padding: 0 20px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #444;
  font-size: 18px;
}


/* オーバーレイ */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
z-index: 999;
}

.overlay.active {
display: block;
}

ハンバーガーアイコンのアニメーション

.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

JavaScriptで開閉処理を実装する

クリックされたらクラスを付け外しするだけの簡単なコードです。

const hamburger = document.getElementById('hamburger');
const nav = document.getElementById('global-nav');
const overlay = document.getElementById('overlay');

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
  nav.classList.toggle('active');
  overlay.classList.toggle('active');
});

// オーバーレイをクリックしたら閉じる
overlay.addEventListener('click', () => {
  hamburger.classList.remove('active');
  nav.classList.remove('active');
  overlay.classList.remove('active');
});

よくあるエラーと対処法

① クリックしても動かない

原因の多くは以下の2つです：

• JavaScriptを </body> 直前に読み込んでいない
• id名が HTML と JS で一致していない

② CSSが効かない

WordPress の場合、キャッシュが残っている可能性があります。スーパーリロード（Ctrl + F5）を試してください。

③ WordPressで動かないとき

• functions.phpでJSが読み込まれていない
• テーマのJSと競合している
• jQuery と混ざってる（$が効かない）

スマホ対応のポイント

• クリック範囲は48px以上（タップしやすくする）
• メニュー幅は画面の70%〜80%推奨
• オーバーレイで閉じる操作は必須

まとめ

JavaScriptでハンバーガーメニューを作る方法を紹介しました。今回のコードはすべてコピペで動くので、初心者の方でも簡単に実装できます。Web制作では必須のスキルなので、ぜひ自分のサイトにも組み込んでみてください。