My recipe for a transformable hamburger: Have it your way

Screenshot from Siggraph Video Review, Special Issue #57, April 1990 [2]
  • One HTML input checkbox
  • One empty <div></div>
  • One <nav> with one <ul> and as many <li><a href=”#”>’s as your heart desires
Mise en place
The ‘left’ property on <nav> is set to 100vw to position it out of the screen.
The z-index is set to 2 so that the now oversized but transparent checkbox is in front of the menu hamburger, the z-index of which is set to 1 so it too is in front of the menu
A 10:1 width-to-height ratio with rounded corners works perfectly for me, but nothing stops you from having your own version
A content of nothing is different from no contents! Try it. It makes all the difference.
‘Visibility: hidden’ because sometimes less is more

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Luigi learns to code

Luigi learns to code

I am a physics graduate, a geoscientist, and most recently a humanitarian worker who enjoys all things technology. I am also a Vector robot owner.