【脱jQuery】cssで動作するハンバーガーメニューでページ内リンクのときハンバーガーメニューをJavaScriptで消す

CSSで表示、非表示を切り替えるハンバーガーメニューで、ハンバーガーメニュー内にページ内リンクがあると、ハンバーガーメニューは表示されたままになってしまいます。

ページ内リンクをクリックしたとき、ハンバーガーメニュー消すJavaScriptを作成しました。

見本htmlとcss

<nav id="sp-navi">
  <input id="nav-input" type="checkbox" class="nav-unshown">
  <label id="nav-open" for="nav-input">
    <img src="../hamburger.svg" alt="メニュー開く" width="28" height="21">
    <span>メニュー</span>
  </label>
  <label class="nav-unshown" id="nav-close" for="nav-input"></label>
  <div id="sp-navi-in">
    <label class="sp-navi-close-button" for="nav-input">
    <img src="../x.svg" alt="メニュー閉じる" width="28" height="21">close</label>
    <div class="sp-navi-inner">
      <ul class="sp-navi__navi">
        <li>
          <a href="#aaa">aaa</a>
        </li>
        <li>
          <a href="#bbb">bbb</a>
        </li>
        <li>
          <a href="#ccc">ccc</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

上記のようなhtmlだとします。

開閉するためのcssは

すみません。scssです。

.nav-unshown {
  display: none;
}

/* 閉じる用の薄黒カバー */
#nav-close {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
}

/* 中身 */
#sp-navi-in {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 80%;
  max-width: 560px;
  height: 100%;
  overflow: auto;
  background: #fff;
  transition: .3s ease-in-out;
  transform: translateX(105%);
}

/* チェックが入ったらもろもろ表示 */
#nav-input:checked ~ #nav-close {
  display: block;
}

/* 中身を表示（スライド） */
#nav-input:checked ~ #sp-navi-in {
  box-shadow: 6px 0 25px rgb(0 0 0 / 15%);
  transform: translateX(0%);
}

こんな感じです。

肝心のJavaScript

<script>
// ハンバーガーメニューを開閉する<input id="nav-input" type="checkbox" class="nav-unshown">を取得（ここがcheckedになるとハンバーガーメニューが開く）
const navInput = document.getElementById('nav-input')

// ハンバーガーメニューの中、リンクタグを全部取得
const hamburger = document.querySelectorAll('.sp-navi__navi li a')

// 返り値は Array ではなく NodeListなので、配列にする（多分しなくてもいいforEach() メソッドを使うので）
const hamburgerA = Array.from(hamburger)

// forEachで回す
hamburgerA.forEach( function(element) {
  // ハンバーガーメニュー内のリンクタグをクリックしたら
  element.addEventListener('click',function(){
    // ハンバーガーメニューのcheckedを外す
    navInput.checked = false
  })
})
</script>

はい。

これだけです。

解説はコメントで入れてあります。

jQueryを使うまでもなく、簡単だと思います。