mercredi 6 juillet 2016

Rest checkbox checked state go back from history

In the following example, I use checkbox for making a pure CSS dropdown navigation, also available in this jsFiddle example.

Open that fiddle, click "Menu", click "Link 1", and click the "Back" button on the browser toolbar, as you can see the checkbox remains checked, so the navigation is still open.

My question is - would it be possible to reset that checkbox to unchecked when going back from the browser history? Any suggestions for a pure CSS solution or Javascript/jQuery please?

HTML

<label for="m">Menu</label>
<input id="m" type="checkbox">
<nav id="n">
  <ul>
    <li><a href="//example.com">Link 1</a></li>
  </ul>
</nav>

CSS

#n {
  display: none;
}
#m:checked ~ #n {
  display: block;
}

Aucun commentaire:

Enregistrer un commentaire