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
  • HTML5

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

  • Remote

Title

The company

  • Remote

Title

The company

  • Remote

Title

The company

  • 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
hello@works-hub.com

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

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!

© 2024 WorksHub

Privacy PolicyDeveloped by WorksHub