We're planting a tree for every job application! Click here to learn more

How to create a simple hamburger menu

Saad Shaikh

22 Jun 2022

1 min read

How to create a simple hamburger menu
  • HTML

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.

# hamburger-menu {
  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. Firefox_Screenshot_2022-05-31T08-35-53.605Z.png

And that's all folks. This is how you make a hamburger menu with only 10 lines of code. Cheers!

Did you like this article?

Saad Shaikh

Web Developer | HTML, CSS, Javascript, SQL & GraphQL | React JS, Gatsby & ASP.NET | PostgreSQL & MongoDB

See other articles by Saad

Related jobs

See all

Title

The company

title

Remote

Title

The company

title

Remote

Title

The company

title

Remote

Title

The company

title

Remote

Related articles

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

JavaScript Functional Style Made Simple

JavaScript Functional Style Made Simple

Daniel Boros

12 Sep 2021

WorksHub

CareersCompaniesSitemapFunctional WorksBlockchain WorksJavaScript WorksAI WorksGolang WorksJava WorksPython WorksRemote Works
email iconhello@works-hub.comUK flag

Ground Floor, Verse Building, 18 Brunswick Place, London, N1 6DZ

US flag

108 E 16th Street, New York, NY 10003

Subscribe to our newsletter

Join over 111,000 others and get access to exclusive content, job opportunities and more!

© 2022 WorksHub

Privacy PolicyDeveloped by WorksHub