Cookies policy

We use cookies to provide the best site experience

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

How to create a simple hamburger menu

Saad Shaikh

22 Jun 2022

22 June 2022

1 min read

How to create a simple hamburger menu
  • CSS3
  • HTML5
  • HTML
  • CSS

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

Title

$undefined - undefined

The company

title

Remote

Title

$undefined - undefined

The company

title

Remote

Title

$undefined - undefined

The company

title

Remote

Title

$undefined - undefined

The company

title

Remote

Related articles

title

title

title

title

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!

© 2021 WorksHub

Privacy PolicyDeveloped by WorksHub