ハンバーガーメニューでナビゲーションリンクをクリックするとメニューを閉じる方法

Posted on by

スマホ用のハンバーガーメニューで、ナビゲーション内のリンクをクリックするとメニューが自動で閉じるようにする方法を解説します。

問題点

一般的なハンバーガーメニューでは、.sp_navi dt a をクリックするとメニューが開閉されます。
しかし、.sp_navi_list li a をクリックしてもメニューが閉じず、
そのままになってしまうことがあります。

また、 .sp_navi.sp.pc_hide に sp_new クラスが残ってしまい、メ
ニューが閉じた状態でも影響を及ぼしてしまうことがあります。

解決策

document.addEventListener を使用して、ナビゲーションリンクがクリックされた際に、
以下の処理を行います。

  • ハンバーガーメニューの開閉ボタン（.sp_navi dt a）の active クラスを削除
  • .sp_navi_list を display: none; にして確実にメニューを閉じる
  • .sp_navi.sp.pc_hide の sp_new クラスを削除し、不要なスタイルが残らないようにする
  • スクロール制限を解除

修正コード

document.addEventListener("DOMContentLoaded", function () {
    // ナビゲーションリンクを取得
    document.querySelectorAll(".sp_navi_list li a").forEach(function (navLink) {
        navLink.addEventListener("click", function () {
            // ハンバーガーメニューの開閉ボタン
            var naviToggle = document.querySelector(".sp_navi dt a");
            var naviList = document.querySelector(".sp_navi_list");
            var naviFixedArea = document.querySelector(".sp_navi_fixed_area");
            var spNavi = document.querySelector('.sp_navi.sp.pc_hide'); // メニュー本体

            if (naviToggle && naviList) {
                // クラスの削除（開いている場合のみ）
                if (naviToggle.classList.contains("active")) {
                    naviToggle.classList.remove("active");
                    naviList.style.display = "none"; // 確実に非表示
                    naviList.classList.remove("menu_new"); // 他のクラスによる表示制御も解除
                }

                // 高さのリセット
                if (naviFixedArea) {
                    naviFixedArea.style.height = "62px";
                }

                // `.sp_navi.sp.pc_hide` の `sp_new` クラスを削除
                if (spNavi && spNavi.classList.contains("sp_new")) {
                    spNavi.classList.remove("sp_new");
                }

                // スクロール制限を解除
                document.body.style.position = "";
                document.body.style.top = "";
                window.scrollTo(0, scrollpos);
            }
        });
    });
});

ポイント

  1. sp_new クラスを削除
    • .sp_navi.sp.pc_hide に sp_new が付いたままだと影響が残るため、クリック時に削除。
  2. naviToggle (.sp_navi dt a) の active も削除
    • これにより、メニュー開閉時の動作が正しくなる。
  3. display: none; を適用
    • .sp_navi_list を確実に非表示にするために style.display = "none"; を適用。
  4. スクロール制限解除
    • document.body.style.position = ""; でスクロールロックを解除。

jQuery を使う場合

もし jQuery を使用している場合は、以下のコードで対応できます。

$(document).ready(function () {
    $(".sp_navi_list li a").on("click", function () {
        $(".sp_navi_list").hide();
        $(".sp_navi dt a").removeClass("active");
        $(".sp_navi.sp.pc_hide").removeClass("sp_new");
        $("body").css("position", "").css("top", "");
    });
});

まとめ

この修正を加えることで、ナビゲーションのリンクをクリックした際に、

  • メニューが確実に閉じる
  • 不要なクラスが残らない
  • スクロール制限が解除される

という状態になり、よりスムーズなユーザー体験を提供できます。ぜひ試してみてください！