In Web Development, animating and adding interactivity on certain events creates a much better user interaction if done correctly. JavaScript is a full-fledged dynamic programming language that when applied to an HTML document, can provide that dynamic interactivity on websites. However, some interactivity can be done without the use of JavaScript. In this post, we’re going to create a "Hamburger Menu" with just HTML and CSS.
Lets kick it off with crafting a simple HTML file.
The page have two sections, the menu and the showcase. In the menu section, I created a div element with a class menu-wrap, in which I have an input element with type checkbox and class .toggler which is to add specific styles to the checked state, a div with a class hamburger, an empty div and another div with class menu. The last div element with class menu have an unordered list which is the content of the hamburger menu (Home, About, Services, and Contact).
I have two CSS files for this project, style.css and menu.css.
Style.css is just basic styling on the HTML. It add styling for the content of the header with classes; .showcase, .container, .showcase-inner, and .btn. There's a :before pseudo element on the .showcase class that gives the shade of the background-color in .showcase to the image in the pseudo element.
In my menu.css I set the menu-wrap to a fixed position because I want the menu to stay at the top even when scrolling the page. The class toggler have an opacity of zero so that the element input with type checkbox doesn't show the checkbox on the page. In creating the horizontal bars, I started with creating the middle bar i.e On the class hamburger, I used the empty div element to create the middle horizontal bar. Using the same .hamburger class and the empty div I use the :before and :after pseudo selector. Top position of the :after selector will be positive value of the value used before so it make the three horizontal, bars.
The :before and :after pseudo selector act as the 1st and the 3rd bar respectively, and the empty div acts as the 2nd bar. I’ve given all these elements ease-in-out transition so that all the transformation will be smoothly. The 1st bar and the 3rd bar transform (rotate) in 90 degrees to create an X on click.
Since .toggler is a checkedbox, the visibility property on the .menu-wrap class and .toggler: checked will be "visible" i.e the visibility from the .menu-wrap and .menu which was hidden initially is now visible in .toggler:checked.
The first div in the class menu will have the transform (scale) property and the second div with the opacity property so that when the bars are clicked (checked), it display the menu (the unordered list).
You can get the files from this GitHub repo:
https://github.com/iamdejean/Hamburger-Menu
Thanks for the read.