ページ内リンクでハンバーガーメニューが閉じない原因と解決する方法

2025.10.13

当ページのリンクには広告が含まれています。

URLをコピーしました！

スマホサイトでよく使われるハンバーガーメニューですが、ページ内リンクをクリックしてもメニューが閉じない、というトラブルに遭遇したことはありませんか？

この記事では、ページ内リンクをクリックした際にハンバーガーメニューを自動で閉じる方法について解説します。jQueryとバニラJavaScript（純粋なJS）の両方で実装方法を紹介します。

この記事はこんな方におすすめ

ハンバーガーメニュー内のリンクをクリックしてもメニューが閉じない
毎回ハンバーガーボタンでメニューを閉じなければならず面倒
UX（ユーザー体験）を向上させたい

完成デモ

まずは完成形の動作を確認したい方はこちらのCodePenをご覧ください。

See the Pen リンククリック時、メニューを閉じる by すずき (@k-suzuki3533) on CodePen.

なぜページ内リンクでメニューが閉じないのか？

通常、外部ページへのリンクをクリックすると、ページがリロードされるのでメニューも自然に消えます。

一方で、ページ内リンク（例：#about）はJavaScriptのイベントがなければ再読み込みされません。そのため、開いたメニューはそのまま残ってしまいます。

これを回避するには、リンククリック時にメニューを閉じる処理をJavaScriptで追加する必要があります。

実装ステップ

1. HTML構造を用意する

<!-- ハンバーガーボタン -->
<button class="hamburger" aria-label="メニューを開閉">☰</button>

<!-- ナビゲーションメニュー -->
<nav class="drawer">
  <ul>
    <li><a href="#about" class="drawer-link">About</a></li>
    <li><a href="#services" class="drawer-link">Services</a></li>
    <li><a href="#contact" class="drawer-link">Contact</a></li>
  </ul>
</nav>

2. CSSで開閉アニメーションを制御

.drawer {
  display: none;
  /* 他にもtransformなどでスライドインのUIにも可 */
}

.drawer.active {
  display: block;
}

.hamburger.active {
  /* ボタンがアクティブな状態の見た目（例：×に変化） */
}

3. JavaScriptで開閉動作を制御

【jQueryを使う場合】

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

$(function () {
  // ハンバーガー開閉
  $(".hamburger").on("click", function () {
    $(this).toggleClass("active");
    $(".drawer").toggleClass("active");
  });

  // ページ内リンククリックでメニューを閉じる
  $(".drawer-link").on("click", function () {
    $(".hamburger").removeClass("active");
    $(".drawer").removeClass("active");
  });
});

【バニラJavaScriptを使う場合】

document.addEventListener("DOMContentLoaded", () => {
  const hamburger = document.querySelector(".hamburger");
  const drawer = document.querySelector(".drawer");
  const links = document.querySelectorAll(".drawer-link");

  // 開閉切り替え
  hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active");
    drawer.classList.toggle("active");
  });

  // リンククリックで閉じる
  links.forEach(link => {
    link.addEventListener("click", () => {
      hamburger.classList.remove("active");
      drawer.classList.remove("active");
    });
  });
});