I have implemented a mobile menu using a checkbox, with the following simplified code:
input, ul {
display: none;
}
label {
cursor: pointer;
}
input:checked ~ ul {
display: block;
}<input type="checkbox" id="toggle-menu" />
<label for="toggle-menu">Menu</label>
<ul>
<li><a href="duckduckgo.com">Link</a></li>
</ul>The only issue is that when a user navigates to another page using the menu and then goes back in the history, the checkbox state is saved, keeping the menu displayed.
Is there a way to prevent this without using Javascript? In simple terms, I want the menu to always remain hidden when a new page is accessed, even through navigation in the browser's history. The user should click on the label to reveal the menu.