別の言い方をすれば、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);
}