Animated burger/menu icon on hover and on click with CSS3
A Pen by Sam Renault on CodePen.
<a href="#"><i>Menu</i></a> |
$('a').click(function() { | |
$(this).toggleClass('active'); | |
}); |
a { | |
display: inline-block; | |
width:18px; | |
height:18px; | |
cursor: pointer; | |
text-decoration: none; | |
} | |
a i { | |
position: relative; | |
display: inline-block; | |
width: 18px; | |
height: 3px; | |
color:#252525; | |
font:bold 14px/.4 Helvetica; | |
text-transform: uppercase; | |
text-indent:-55px; | |
background: #252525; | |
transition:all .2s ease-out; | |
} | |
a i::before, a i::after { | |
content:''; | |
width: 18px; | |
height: 3px; | |
background: #252525; | |
position: absolute; | |
left:0; | |
transition:all .2s ease-out; | |
} | |
a i::before { | |
top: -7px; | |
} | |
a i::after { | |
bottom: -7px; | |
} | |
a:hover i::before { | |
top: -10px; | |
} | |
a:hover i::after { | |
bottom: -10px; | |
} | |
a.active i { | |
background: #fff; | |
} | |
a.active i::before { | |
top:0; | |
-webkit-transform: rotateZ(45deg); | |
-moz-transform: rotateZ(45deg); | |
-ms-transform: rotateZ(45deg); | |
-o-transform: rotateZ(45deg); | |
transform: rotateZ(45deg); | |
} | |
a.active i::after { | |
bottom:0; | |
-webkit-transform: rotateZ(-45deg); | |
-moz-transform: rotateZ(-45deg); | |
-ms-transform: rotateZ(-45deg); | |
-o-transform: rotateZ(-45deg); | |
transform: rotateZ(-45deg); | |
} | |
/* Button placement */ | |
a { | |
position: absolute; | |
left:50%; | |
margin-left:-9px; | |
top:50%; | |
margin-top:-9px; | |
} |