Saad Shaikh
22 Jun 2022
•
1 min read
Do you want to create a simple hamburger menu with as little code as possible? Well, I've got you.
All you need is 1 empty div element and some CSS.
First let's decide what the hamburger menu will look like. I want it to be 20px tall and 20px wide. I have also decided to use the Hex color# 6d7075 (which is a shade of grey) for the 3 horizontal bars. Now, let's get started.
Below is the code for the div you need to create in the HTML. It is just a div with an id attribute. I'm using and id instead of a class because you will need an id anyway for the onClick function via JavaScript. I will not be getting into the functionality of the div in this article.
<div id="hamburger-menu"></div>
And below is the code for the styling of the div in your CSS file. First, you define the dimensions of the menu and then you create the 3 grey vertical bars using the linear gradient feature in the background attribute. Since there are 3 bars, that means that there will actually be 5 bars, 3 grey ones and 2 white (or transparent) ones. So 0% to 20% will be grey, 20% to 40% will be white, 40% to 60% will be grey, 60% to 80% will be white and finally 80% to 100% will be grey. Since the bars are horizontal, you do not need to set the angle for the gradients as it is at 0 degrees by default.
height: 20px;
width: 20px;
background: linear-gradient# 6d7075 0%,# 6d7075 20%,
white 20%, white 40%,
# 6d7075 40%,# 6d7075 60%,
white 60%, white 80%,
# 6d7075 80%,# 6d7075 100%);
}
Now you will have a hamburger menu that looks like the below image.
And that's all folks. This is how you make a hamburger menu with only 10 lines of code. Cheers!
Saad Shaikh
Web Developer | HTML, CSS, Javascript, SQL & GraphQL | React JS, Gatsby & ASP.NET | PostgreSQL & MongoDB
See other articles by Saad
Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ
108 E 16th Street, New York, NY 10003
Join over 111,000 others and get access to exclusive content, job opportunities and more!