top | item 43351848

(no title)

mablopoule | 11 months ago

I haven't seen it mentioned here, but one other classic trick for hamburger menu is to use a checkbox, and let CSS handle the rest.

Something like:

  <header class="main-header">
    <input class="hamburger" id="hamburger-action" type="checkbox" />
    <label for="hamburger-action">Some icon here</label>
    <nav class="main-navigation">My menu here</nav>
  </header>
and then use the `:checked` CSS selector to display or not the hamburger menu, you can see it working in my (very barebone :D) website [1]. Note that this implementation is not keyboard-navigable because the input is not visible, I should fix it someday.

[1] https://www.marc-monchablon.fr/

discuss

order

No comments yet.