ウインドウサイズ変更時にハンバーガーメニューを都度閉じるには

スマホ・タブレットサイズ時にハンバーガーメニューを開き、そのままPCサイズにすると、再度サイズをスマホ・タブレットサイズにした際、ハンバーガーメニューが開いたままであった。

これは、CSSで実装することができないためJavaScriptを利用。

document.addEventListener("DOMContentLoaded", () => {
    const menuToggle = document.querySelector("#hmb_btn-check"); // チェックボックスのIDを指定
    const mediaQuery = window.matchMedia("(max-width: 1200px)");
  
    const resetMenu = () => {
      if (menuToggle) {
        menuToggle.checked = false; // チェックボックスをリセット
      }
    };
  
    // ウインドウサイズが変更されたとき
    window.addEventListener("resize", () => {
      resetMenu(); // サイズ変更時にリセット
    });
  });

これを.jsのフォルダに記述して、HTMLに

<script src="./js/main.js"></script>

で呼び出す。</body>の直前に記述すると、スムーズに実装できる。

その際、フォルダの階層に気をつけて、フォルダ名を記述するようにする。