CSS Animated Hamburger (Menu Icon) with Transforms using a Single Child Element.
Forked from Elijah Manor's Pen CSS Animated Hamburger Icon.
A Pen by Jase Smith on CodePen.
CSS Animated Hamburger (Menu Icon) with Transforms using a Single Child Element.
Forked from Elijah Manor's Pen CSS Animated Hamburger Icon.
A Pen by Jase Smith on CodePen.
<header> | |
<a href="#" class="menu-toggle"> | |
<span class="menu-icon"></span> | |
<b class="menu-label">Menu</b> | |
</a> | |
</header> |
document.querySelector( ".menu-toggle" ) | |
.addEventListener( "click", function() { | |
this.classList.toggle( "open" ); | |
}); |
/* Setup Demo UI */ | |
body { | |
background-color: #1c1e1f; | |
height: 100%; | |
color: grey; | |
font-family: sans-serif; | |
font-size: 15px; | |
} | |
header { | |
position: relative; | |
font-size: 2em; | |
background: #15c5ec; | |
padding: 1rem; | |
border-radius: .1em; | |
line-height: 1; | |
width: 80%; | |
margin: 0 auto; | |
} | |
.menu-toggle { | |
color: white; | |
text-decoration: none; | |
} | |
.menu-label { | |
margin-bottom:-.2em; | |
display:inline-block; | |
vertical-align: middle; | |
} | |
.menu-icon + .menu-label { | |
margin-left:.2em; | |
} | |
/* the animated menu icon */ | |
.menu-icon { | |
cursor: pointer; | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
font-size: .5em; | |
color: inherit; | |
background: currentColor; | |
border-radius: .5em; | |
height: .4em; | |
width: 2.6em; | |
} | |
.menu-icon:before, | |
.menu-icon:after { | |
border-radius: .5em; | |
height: .4em; | |
width: 100%; | |
left: 0; | |
background: currentColor; | |
position: absolute; | |
display: block; | |
content: ''; | |
} | |
.menu-icon:before { | |
top: -.8em; | |
} | |
.menu-icon:after { | |
top: .8em; | |
} | |
.menu-icon, | |
.menu-icon:before, | |
.menu-icon:after { | |
transition: all .5s ease-in-out; | |
} | |
/* active/open menu icon */ | |
.open .menu-icon { | |
background-color: transparent; | |
transform: rotate(45deg) translate(0%, -50%); | |
} | |
.open .menu-icon:before, | |
.open .menu-icon:after { | |
top: 0em; | |
} | |
.open .menu-icon:before { | |
transform: rotate(180deg); | |
} | |
.open .menu-icon:after { | |
transform: rotate(270deg); | |
} |