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.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)