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 is just basic styling on the HTML. It add styling for the content of the
header with classes;
.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.
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
: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.
: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 which was hidden initially is now visible in
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:
Thanks for the read.
Classic DEV Post from Feb 19