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.
You may like this:
- Responsive Website layout with HTML and CSS
- Create Login form page with HTML and CSS
- Animated Search Bar with HTML and CSS
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.
<!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>
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);
}
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 visiting.
