How to create a simple hamburger menu

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!