top | item 43350321

(no title)

ahallock | 11 months ago

I love the how he simulates the hamburger menu with a page navigation. It just feels so wholesome in a sea of complex JS frameworks

discuss

order

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/