CSS Animated Hamburger Icon with Transforms
Forked from Elijah Manor's Pen CSS Animated Hamburger Icon.
A Pen by Captain Anonymous on CodePen.
CSS Animated Hamburger Icon with Transforms
Forked from Elijah Manor's Pen CSS Animated Hamburger Icon.
A Pen by Captain Anonymous on CodePen.
<h3>Animierter CSS Hamburger (click on hamburger)</h3> | |
<a id="nav-toggle" href="#"><span></span></a> |
document.querySelector( "#nav-toggle" ) | |
.addEventListener( "click", function() { | |
this.classList.toggle( "active" ); | |
}); |
body { background-color: black; height: 100%; } | |
h3 { color: white; } | |
#nav-toggle { position: absolute; left: 50%; top: 50%; } | |
#nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; } | |
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { | |
cursor: pointer; | |
border-radius: 1px; | |
height: 5px; | |
width: 35px; | |
background: white; | |
position: absolute; | |
display: block; | |
content: ''; | |
} | |
#nav-toggle span:before { | |
top: -10px; | |
} | |
#nav-toggle span:after { | |
bottom: -10px; | |
} | |
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { | |
transition: all 500ms ease-in-out; | |
} | |
#nav-toggle.active span { | |
background-color: transparent; | |
} | |
#nav-toggle.active span:before, #nav-toggle.active span:after { | |
top: 0; | |
} | |
#nav-toggle.active span:before { | |
transform: rotate(45deg); | |
} | |
#nav-toggle.active span:after { | |
transform: rotate(-45deg); | |
} |