実現したいこと
ハンバーガーメニューをページ内リンクしたら閉じるようにしたいのですが、
こちらでいろいろ検索してjsもアレンジしてもよく分からず・・・
申し訳ございませんが、ご教授いただけないでしょうか?
cssのコードは本みながら少しずつ変えながらから引用してます
該当のソースコード
html
1 2<header class="header"> 3 <div class="header-container"> 4 <div class="global-container"> 5 <button class="navbtn" 6 onClick="document.querySelector('html').classList.toggle('open')"> 7 <i class="fa-solid fa-bars"></i> 8 <i class="fa-solid fa-xmark"></i> 9 <span class="sr-only">menu</span> 10 </button> 11 <div class="site"> 12 <span class="title">テスト</span> 13 </div> 14 <nav class="nav"> 15 <ul class="navmenu"> 16 <li><a href="#test2">テスト1</a></li> 17 <li><a href="#test1">テスト2</a></ii> 18 </ul> 19 </nav> 20 </div> 21 </div> 22</header>
css
1.navmenu{ 2 list-style: none; 3} 4a{ 5 text-decoration: none; 6 color: blue; 7} 8.navbtn{ 9 outline: none; 10 border: none; 11 background: transparent; 12 cursor: pointer; 13 color: black; 14 font-size: 40px 15} 16.open .navbtn{ 17 z-index: 110; 18 color: black; 19} 20.navbtn .fa-bars{ 21 display: revert; 22} 23.open .navbtn .fa-bars{ 24 display: none; 25} 26.navbtn .fa-xmark{ 27 display: none; 28} 29.open .navbtn .fa-xmark{ 30 display: revert; 31} 32 33@media(min-width:768px){ 34 .navbtn{ 35 display:none; 36 } 37} 38@media(max-width: 767px){ 39 .nav{ 40 position: fixed; 41 inset: -100% 0 100% 0 ; 42 z-index: 100; 43 background-color: white; 44 transition: transform 0.3s; 45 } 46 .open .nav{ 47 transform: translate(0,100%); 48 } 49 .open body{ 50 position: fixed; 51 overflow: hidden; 52 } 53 .nav ul{ 54 display: flex; 55 flex-direction: column; 56 justify-content: center; 57 text-align: center; 58 } 59} 60 61@media(min-width:768px){ 62 .nav ul{ 63 display: flex; 64 gap: 20px; 65 color: black; 66 } 67}
試したこと
https://teratail.com/questions/173001
こことか参照したのですが申し訳ございません。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。