ハンバーガーメニューでページ内リンクをクリックした後にメニューを消す方法

別の言い方をすれば、CSSによるハンバーガーメニュー(ドロワーメニュー)でワンファイルサイトのページ内リンクをリック遷移した場合、メニューが消えないときの対処方法です。

良く見られるこのチェックボックスを利用したCSSハンバガーメニューはその特性上、同じファイル内のリンクに対してクリックした後にメニューを消すことができない。

対処方法としてはリンク遷移時に強制的にページをリロードしてメニューを消そうという考え方です。

ポイントは、リンクに?1を添付して以下のように。
実際にはフェイクの値を渡してページを強制的にリロードさせますので1など以外にどんな値でもOKです。
同じリンクの再押しでは再読み込みが発生しないためにメニューは消えませんが、他のリンク押しは再読み込みが発生します。

href="?1#sec1"

HTMLとCSSはこちら。
一般的なCSS、checkboxタイプのハンバーガーメニュー。

<header> 
 <label for="check">ham</label> 
 <input type="checkbox" id="check" /> 
 <nav> 
  <a href="?1#sec1">AAA</a> 
  <a href="?2#sec2">BBB</a> 
  <a href="?3#sec3">CCC</a> 
 </nav> 
</header>
 html { 
  scroll-behavior: smooth; 
 } 
 html, 
 body { 
  height: 100%; 
 } 
 header { 
  position: fixed; 
 } 

 label { 
  background-color: burlywood; 
  display: inline-block; 
  width: 100px; 
  height: 50px; 
  cursor: pointer; 
 } 

 input#check + nav { 
  display: none; 
 } 

 input#check:checked + nav { 
  display: block; 
  width: 300px; 
  background-color: rgba(0, 0, 255, 0.431); 
 } 

 input#check { 
  display: none; 
 } 

 a { 
  display: block; 
  background-color: rgba(117, 255, 117, 0.781); 
 } 

 a:hover { 
  background-color: rgba(255, 111, 140, 0.746); 
 }

まだ投票されていません