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を使うまでもなく、簡単だと思います。