Hi dear welcome to "Code Prime" Blog . In this post we are going to learn how to make animated hamburger menu using html css and javascript. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it. 3rdly creat Ap.jss file Then Copy The Javasceipt CODE then open the index.html file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Hamburger Menu</title>
<link rel="stylesheet" href="hamburger.css">
<script src="ap.js"></script>
</head>
<body>
<div class="container">
<div class="menu" id="menu1">
<div>
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
</div>
<div class="menu2" id="menu2">
<div>
<span class="bar-1"></span>
<span class="bar-2"></span>
<span class="bar-3"></span>
</div>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #fff;
}
.menu, .menu2 {
width: 200px;
height: 200px;
background: linear-gradient(45deg, #f09, #111);
border-radius: 5px;
margin: 5%;
}
.menu div, .menu2 div{
position: relative;
width: 120px;
height: 120px;
/* background: #fff; */
margin: 40px;
}
.menu span, .menu2 span{
position: absolute;
width: 100%;
height: 10px;
border-radius: 5px;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: transform 0.5s, width 0.5s;
}
.menu .bar-1{
transform: translate(-50%, -50px);
}
.menu .bar-3{
transform: translate(-50%, 40px);
}
.changebtn-1 .bar-1{
transform: translate(-50%, -50%) rotate(-45deg);
}
.changebtn-1 .bar-2{
width: 0;
}
.changebtn-1 .bar-3{
transform: translate(-50%, -50%) rotate(45deg);
}
/* menu 2 */
.menu2 .bar-1{
width: 50%;
transform: translate(-100%, -50px);
}
.menu2 .bar-3{
width: 50%;
left: auto;
right: 0;
transform: translate(0, 40px);
}
.changebtn-2 .bar-1{
transform-origin: 0 0;
transform: translate(0,0) rotate(-45deg);
}
.changebtn-2 .bar-2{
transform: translate(-50%,-50%) rotate(45deg);
}
.changebtn-2 .bar-3{
transform-origin: 100% 0;
transform: translate(-100%,-50%) rotate(-45deg);
}
Javascript
var menu = document.getElementById('menu1');
var menu2 = document.getElementById('menu2');
menu.onclick = function(){
menu.classList.toggle('changebtn-1')
};
menu2.onclick = function(){
menu2.classList.toggle('changebtn-2')
};
0 Comments