Animated Hamburger Menu Button 1

Developer
Tim
Size
2,701 Kb
Views
24,288
  1. Animated Hamburger Menu Button 1 Previews
  2. Animated Hamburger Menu Button 1 HTML Codes
  3. Animated Hamburger Menu Button 1 CSS Codes
  4. Animated Hamburger Menu Button 1 JS Codes

How do I make an animated hamburger menu button 1?

Decided to make my own Hamburger Menu Button from scratch as an exercise. This one uses Keyframe Animation.. What is a animated hamburger menu button 1? How do you make a animated hamburger menu button 1? This script and codes were developed by Tim on 13 October 2022, Thursday.

Animated Hamburger Menu Button 1 Previews
IQ Test

Animated Hamburger Menu Button 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Hamburger Menu Button 1</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="menu-button"> <div></div> <div></div> <div></div>	</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Hamburger Menu Button 1 - Script Codes CSS Codes

body { background-color: #2196F3; font-size: 62.5%;
}
@-webkit-keyframes div1 { 0% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(0.9em); transform: translateY(0.9em); } 100% { -webkit-transform: translateY(0.9em) rotate(45deg); transform: translateY(0.9em) rotate(45deg); }
}
@keyframes div1 { 0% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(0.9em); transform: translateY(0.9em); } 100% { -webkit-transform: translateY(0.9em) rotate(45deg); transform: translateY(0.9em) rotate(45deg); }
}
@-webkit-keyframes div2 { 0% { opacity: 100; } 50% { opacity: 100; } 51% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes div2 { 0% { opacity: 100; } 50% { opacity: 100; } 51% { opacity: 0; } 100% { opacity: 0; }
}
@-webkit-keyframes div3 { 0% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(-0.9em); transform: translateY(-0.9em); } 100% { -webkit-transform: translateY(-0.9em) rotate(-45deg); transform: translateY(-0.9em) rotate(-45deg); }
}
@keyframes div3 { 0% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(-0.9em); transform: translateY(-0.9em); } 100% { -webkit-transform: translateY(-0.9em) rotate(-45deg); transform: translateY(-0.9em) rotate(-45deg); }
}
@-webkit-keyframes div1b { 0% { -webkit-transform: translateY(0.9em) rotate(45deg); transform: translateY(0.9em) rotate(45deg); } 50% { -webkit-transform: translateY(0.9em); transform: translateY(0.9em); } 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
}
@keyframes div1b { 0% { -webkit-transform: translateY(0.9em) rotate(45deg); transform: translateY(0.9em) rotate(45deg); } 50% { -webkit-transform: translateY(0.9em); transform: translateY(0.9em); } 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
}
@-webkit-keyframes div2b { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 100; } 100% { opacity: 100; }
}
@keyframes div2b { 0% { opacity: 0; } 50% { opacity: 0; } 51% { opacity: 100; } 100% { opacity: 100; }
}
@-webkit-keyframes div3b { 0% { -webkit-transform: translateY(-0.9em) rotate(-45deg); transform: translateY(-0.9em) rotate(-45deg); } 50% { -webkit-transform: translateY(-0.9em); transform: translateY(-0.9em); } 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
}
@keyframes div3b { 0% { -webkit-transform: translateY(-0.9em) rotate(-45deg); transform: translateY(-0.9em) rotate(-45deg); } 50% { -webkit-transform: translateY(-0.9em); transform: translateY(-0.9em); } 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
}
.menu-button { margin: 5em;
}
.menu-button div { margin: 0.6em 0 0.6em 0; height: 0.3em; width: 3em; background-color: white;
}
.menu-button div:nth-child(1).reset { -webkit-animation: div1b 0.5s forwards; animation: div1b 0.5s forwards;
}
.menu-button div:nth-child(1).active { -webkit-animation: div1 0.5s forwards; animation: div1 0.5s forwards;
}
.menu-button div:nth-child(2).reset { -webkit-animation: div2b 0.5s forwards; animation: div2b 0.5s forwards;
}
.menu-button div:nth-child(2).active { -webkit-animation: div2 0.5s forwards; animation: div2 0.5s forwards;
}
.menu-button div:nth-child(3).reset { -webkit-animation: div3b 0.5s forwards; animation: div3b 0.5s forwards;
}
.menu-button div:nth-child(3).active { -webkit-animation: div3 0.5s forwards; animation: div3 0.5s forwards;
}

Animated Hamburger Menu Button 1 - Script Codes JS Codes

$('.menu-button').click(function() { if ($('.menu-button').children('div').hasClass('active')) { $('.menu-button').children('div').removeClass('active'); $('.menu-button').children('div').addClass('reset'); } else if($('.menu-button').children('div').hasClass('reset')) { $('.menu-button').children('div').removeClass('reset'); $('.menu-button').children('div').addClass('active'); } else { $('.menu-button').children('div').addClass('active'); }
});
Animated Hamburger Menu Button 1 - Script Codes
Animated Hamburger Menu Button 1 - Script Codes
Home Page Home
Developer Tim
Username tym0
Uploaded October 13, 2022
Rating 3
Size 2,701 Kb
Views 24,288
Do you need developer help for Animated Hamburger Menu Button 1?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (tym0) Script Codes
Name
Scroll Down Animation
Animated Checkmark
Animated Hamburger Menu Button 2
Material New Tab Page
A Pen by Tim
Floaty Label
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!