Hamburger Menu Icon with HTML, CSS and JavaScript

Hello friends, in this article, you will learn how to create a simple Hamburger Menu Icon using only HTML, CSS and JavaScript. I use the technique of CSS webkit to make this snippet. Previously I have shared another snippet based on how to create a To Do List. In this tutorial, I have created a hamburger menu icon.

Below is the video tutorials. watch and practices

A hamburger icon, in consumer interface (ui) layout, is a navigational symbol including 3 stacked horizontal lines that imply the vicinity of a hidden menu. The icon were given its name from the truth that its structure resembles a burger in a bun in a simplified photo. While an quit person clicks, taps or touches the icon, the menu slides out from the side of the display, supplying a fixed of alternatives for future action. The hamburger icon may also be known as a menu icon or a slide drawer icon.

Use of a hamburger icon illustrates a principle in consumer enjoy (ux) layout called innovative disclosure. An critical intention of innovative disclosure in internet site and cell app design is to free up precious display screen real property by only showing statistics that is relevant to the stop consumer's modern interest. Additional information and functions may be accessed whilst asked as users circulate thru the website or app.

Source Code:

If you like this Hamburger menu icon, then feel free to use it in your project. Copy the code by clicking on Copy button provided below.

First, you have to create three files. One of them is HTML, other is CSS and third one is JavaScript. After creating the files, paste the code provided below.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Humblur Menu | By Code Info</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container" onclick="myFunction(this)">
      <div class="bar one"></div>
      <div class="bar snd"></div>
      <div class="bar third"></div>
    </div>
    
      <script src="Javascript.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you have to create a file with .css extension.

CSS CODE:

body{
  background-color: black;
}
.container {
  width: 50px;
  margin: 100px auto;
  cursor: pointer;
}

.bar {
  width: 35px;
  height: 5px;
  background-color: white;
  border-radius: 10px;
  margin: 6px 0;
  transition: 0.4s;
}

.change .one {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .snd {
  opacity: 0;
  margin-left: 20px;
  transition: 1s;
}

.change .third {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

Third, create a JavaScript file with the name of main.js and paste the given codes in your JavaScript file. Remember, you have to create a file with .js extension.

JAVASCRIPT CODE:

  function myFunction(x) {
  x.classList.toggle("change");
}

I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for stopping by.

You may like this:

Source Code:

1 Comments

Post a Comment

About Us

Contact Form