Hamburger menu sliding in
I spent most of yesterday working on a responsive menu for Maracuya. I wanted something that plays nicely with my BEMIT CSS setup. I ended up creating two menus. The first one is the desktop-sized menu,
c-menu, which contains a list of
c-menu also contains
c-menu__hamburger-button, which is hidden by default.
If the screen width is small enough, all
c-menu__items are hidden and the hamburger button is shown. In addition, there is an off-screen
<div> that is
100vw. I added an event listener to the hamburger button that does a CSS transition to move the hamburger menu overlay in a
position: fixed above our content.
This is all super basic frontend design, but I’m learning quite a lot from implementing very basic things from scratch!