This content originally appeared on DEV Community and was authored by Dezigner Bay
Demo
Hi guys, in this short tutorial, you're going to learn how to create a Hamburger Icon with HTML,CSS and JavaScript.
The hamburger menu icon can also be referred to as a Three-line menu, a Menu button, or a Hotdog menu. The hamburger icon is very useful for responsive designing or mobile views with smaller screen sizes. The icon which is consisting of three horizontal bars. Its function is to toggle a menu or navigation etc.
It is easy to create this hamburger menu icon with only HTML,CSS and JavaScript. OK let's start then.
At first create a index.html page. Today I am going to create a hamburger icon with two horizontal bars but when you've learned this, I hope you'll try making a three-bar hamburger icon.
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div class="hum_toggle" id="hum-toggle" onclick="togglehum()">
<span></span>
<span></span>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
In index.html ,I have created two spans tags within an outer div. The onclick event is used to trigger a function when an element is clicked on. When you click the .hum_toggle div element, togglehum() function will be triggered. The togglehum() function has declared in main.js.
style.css
.hum_toggle
{
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
border: solid black 2px;
border-radius: 50%;
}
.hum_toggle span
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 60%;
height: 4px;
transition: all 300ms ease-in-out;
border-radius: 5px;
background: black;
}
.hum_toggle span:nth-child(1)
{
top: 40%;
}
.hum_toggle span:nth-child(2)
{
top: 60%;
}
.hum_toggle.active span:nth-child(1)
{
top: 50%;
transform: translate(-50%,-50%) rotate(45deg);
}
.hum_toggle.active span:nth-child(2)
{
top: 50%;
transform: translate(-50%,-50%) rotate(-45deg);
}
So,let's see how span:nth-child(1) and span:nth-child(2) child selectors are working.
main.js
function togglehum(){
var hum = document.getElementById('hum-toggle');
hum.classList.toggle('active');
}
If the togglehum function triggered, the active class adds to the hum_toggle class.
Demo
Hope you will enjoy this article. See you in the next one and don't forget to subscribe my channel??
This content originally appeared on DEV Community and was authored by Dezigner Bay
Dezigner Bay | Sciencx (2021-06-05T17:04:35+00:00) Hamburger Icon. Retrieved from https://www.scien.cx/2021/06/05/hamburger-icon/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.