Animated Hamburger Menu Icon via HTML and CSS

Submit By webmaster 2 years ago in html category
Tags: menuanimation
Animated Hamburger Menu Icon via HTML and CSS
Preview HTML CSS JavaScript Resources
<h1>Animated Hamburger Menu Icon via HTML</h1> <div class="hamburger css-hamburger"> Mouse Hover Me <span class="bars bar1"></span> <span class="bars bar2"></span> <span class="bars bar3"></span> </div> <div class="hamburger js-hamburger"> Click ME <span class="bars bar1"></span> <span class="bars bar2"></span> <span class="bars bar3"></span> </div>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); body { font-family: 'Sen', sans-serif; background: #bbdefb; } .hamburger { cursor: pointer; margin: 50px 50px; } .bars { background-color: #000; width: 40px; height: 4px; transition: 0.5s; margin: 7px 0; display: block; } .open-hamburger .bar1, .css-hamburger:hover .bar1 { transform: rotate(-45deg) translate(-8px, 6px); } .open-hamburger .bar2, .css-hamburger:hover .bar2 { opacity: 0; } .open-hamburger .bar3, .css-hamburger:hover .bar3 { transform: rotate(42deg) translate(-9px, -8px); }
document.querySelector(".js-hamburger") .addEventListener('click', function(){ this.classList.toggle("open-hamburger"); });

Download Animated Hamburger Menu Icon via HTML and CSS snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with Animated Hamburger Menu Icon via HTML and CSS snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet