ページ内リンクでハンバーガーメニューが勝手に閉じるようにしたい。

Question

ハンバーガーメニューをCSSで作っています。

<div id="nav-drawer" class="spnav"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content"> <nav> <ul> <li><a href="リンク先１">ABOUT</a><br></li> <li><a href="リンク先２">MENU</a><br></li> <li><a href="リンク先３">ACCESS</a><br></li> <li><a href="リンク先４">CONTACT</a><br></li> </ul> </nav> </div> </div>

といった形でHTMLは作っています。
ページ内リンクでとんだ後に、メニューが勝手に閉じる動作を追加したいです。
ハンバーガーメニューの動き、リンクまではうまくいっています。
調べて色々いじっていますが、cssをいじっても変化がなく、どこに何をあてはめたらいいか、まったくの初心者でわからず悩んでいます。

教えて下さる方いませんか。

Comments

[hoshi-takanori]

リンク先がページ内リンクの場合は css だけでは難しいのでは。
https://yuntu-tek.com/hamburger-menu/#i-4

[退会済みユーザー]

そうなのですね、まだJavaScriptは勉強していないので
その辺りがわかっていませんでした。
すみません、ありがとうございます。
Javaの勉強してから作ろうと思います。

[hoshi-takanori]

がんばってください。

ちなみに、Java と JavaScript はメロンとメロンパンくらい違うと言われてます…。
https://fastcoding.jp/blog/all/jquery/java-javascript/