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

こんにちは。すずきです。

この記事ではページ内リンクでハンバーガーメニューを閉じる方法について解説します。

完成品のデモ

まずは完成品のデモを紹介します。
HTML、CSSそしてjQueryを使用して実装しています。
ハンバーガーメニュー内のリンクをクリックすると、メニューが閉じる動作が確認できると思います。

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

ページ内リンクでハンバーガーメニューが閉じない原因

ページ内リンクをクリックしてもメニューが閉じない原因は、リンクにJavaScriptのイベントが指定されていないからです。

通常、他のページに遷移する場合はページが再読み込みされるので、ハンバーガーメニューも消えます。
しかし、ページ内リンクの場合、再読み込みがされないのでメニューは残ったままになります。

そのため、ページ内リンクの場合は、別途メニューを閉じるイベントを指定する必要があります。

次からはその具体的な方法について解説します。

ページ内リンクでハンバーガーメニューを閉じる方法

基本的なハンバーガーメニューを作成する

まずは基本となるハンバーガーメニューを作成します。
ハンバーガーメニューの作成方法についてはこちらの記事で解説しています。

あわせて読みたい

【コピペOK】ハンバーガーメニューの作り方を徹底解説【jQuery】 ハンバーガーメニューの作り方がわからない 使っているハンバーガーメニューが合っているのか不安 実務で使えるハンバーガーメニューを知りたい このような悩みに答えま…

ページ内リンクにもイベントを指定する

ハンバーガーメニューを作成したら、次にリンククリック時にメニューを消すイベントを追加します。

今回、動きに関する部分はCSSで作成し、JavaScriptでクラス（.active）の付け外しをしています。
そのため、メニュークリック時にクラスを外すよう指定します。

具体的なコードは以下になります。
jQueryを使用していますのでCDNも読み込んでください。

$(function () {
  // ハンバーガーボタンクリックで実行
  $(".drawer__button").click(function () {
    $(this).toggleClass("active");
    $(".drawer__nav").toggleClass("active");
  });

  $(".drawer__nav__link").click(function () {
    $(".drawer__button").removeClass("active");
    $(".drawer__nav").removeClass("active");
  });
  // function
});

まとめ

ページ内リンクでハンバーガーメニューを閉じる方法について紹介しました。

実装のポイントは以下のとおりです。

ページ内リンクでもメニューが消えるようにすると、毎回手動でメニューを閉じる手間もなくなるので、読者にとっても使いやすいサイトになるかと思います。

今回紹介したコードで簡単に実装できますので、ぜひ試してみてください。