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 normally. 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 which class name is hum_toggle
. 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');
}
when the togglehum
function is triggered, the active
class adds to the hum_toggle
class.You can check it by using developer tools.
right click on the browser window --> click inspect element --> click on Elements
tab
Demo
Hope you will enjoy this article. See you in the next post and don't forget to subscribe my channelππ
Top comments (3)
Your review is very well-written and provides a clear overview of the ulyagames , highlighting its key benefits and features
It's amazing how Heardle manages to make guessing songs so engaging
Many thanks, geometry dash! The second is a unique burger menu with fantastic animation, and I really enjoyed it!