Animated Hamburger Menu Icon
How do I make an animated hamburger menu icon?
What is a animated hamburger menu icon? How do you make a animated hamburger menu icon? This script and codes were developed by Jon Milner on 09 December 2022, Friday.
Animated Hamburger Menu Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Hamburger Menu Icon</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button class="js-toggle-menu"> <div class="hamburger"> <span class="hamburger__line"></span> <span class="hamburger__line"></span> <span class="hamburger__line"></span> </div>
</button> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated Hamburger Menu Icon - Script Codes CSS Codes
/* Demo */
* { outline: none;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100vh; background-color: #ecf0f1;
}
button { padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: none;
}
/* Options */
:root { --hamburger-height: 40px; --hamburger-width: 30px; --hamburger-border-radius: 100px; --hamburger-color: #3498db; --hamburger-line-height: 6px; --hamburger-transition-easing: ease-in-out; --hamburger-transition-timing: 0.15s;
}
/* Hamburger Icon */
.hamburger { position: relative; width: var(--hamburger-height); height: var(--hamburger-width);
}
.hamburger__line { display: block; position: absolute; left: 0; width: 100%; height: var(--hamburger-line-height); background-color: var(--hamburger-color); border-radius: var(--hamburger-border-radius); -webkit-transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), transform var(--hamburger-transition-timing) var(--hamburger-transition-easing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), transform var(--hamburger-transition-timing) var(--hamburger-transition-easing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing);
}
.is-active .hamburger__line { -webkit-transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing), transform var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing); transition: top var(--hamburger-transition-timing) var(--hamburger-transition-easing), bottom var(--hamburger-transition-timing) var(--hamburger-transition-easing), transform var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing), -webkit-transform var(--hamburger-transition-timing) var(--hamburger-transition-easing) var(--hamburger-transition-timing);
}
.hamburger__line:nth-child(1) { top: 0; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg);
}
.is-active .hamburger__line:nth-child(1) { top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
}
.hamburger__line:nth-child(2) { top: 50%; -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg);
}
.is-active .hamburger__line:nth-child(2) { -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg);
}
.hamburger__line:nth-child(3) { bottom: 0; -webkit-transform: translateY(50%) rotate(0deg); transform: translateY(50%) rotate(0deg);
}
.is-active .hamburger__line:nth-child(3) { bottom: 50%; -webkit-transform: translateY(50%) rotate(-45deg); transform: translateY(50%) rotate(-45deg);
}
Animated Hamburger Menu Icon - Script Codes JS Codes
$('.js-toggle-menu').on('click', function() { $(this).toggleClass('is-active');
});
![Animated Hamburger Menu Icon - Script Codes](http://shots.codepen.io/jonmilner/pen/yJVOmw-512.jpg)
Developer | Jon Milner |
Username | jonmilner |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,952 Kb |
Views | 10,120 |
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!
Name | Size |
A Pen by Jon Milner | 3,675 Kb |
Kirby in CSS | 4,062 Kb |
Basic Custom Select Element | 6,112 Kb |
Animated Multi-Step Progress Bar | 3,802 Kb |
Simple Accordion Menu | 3,291 Kb |
Playing Around with BEM | 2,302 Kb |
Custom Form Styles | 4,749 Kb |
Playing Around with AMCSS | 2,454 Kb |
Responsive Card Layout using CSS Columns | 2,651 Kb |
Simple CSS Radial Progress Bar | 3,977 Kb |
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!
Name | Username | Size |
Vue Transition | Chenming142 | 4,561 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
CSS Gem Badge | Orchard | 3,335 Kb |
Hello People | Danburrows | 2,365 Kb |
Easing | GreenSock | 2,043 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
ECharts Version 3.0 - Bar Marker Chart | WebCodePro | 2,726 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Count up | Alanshortis | 2,391 Kb |
Tooltip in table | Roine | 3,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!