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.
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!
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!