I made a quick pen for yall to create a hamburger icon that animates to an X for close. Super simple with just a few lines of CSS and JS!
<a class="fancy-menu" href="#">
<span></span>
<span></span>
<span></span>
</a>
.fancy-menu {
display: inline-block;
}
.fancy-menu span {
background: #000;
border-radius: 3px;
display: block;
height: 3px;
margin-top: 5px;
padding: 0;
position: relative;
transition: all 0.2s ease;
width: 25px;
}
.fancy-menu.active span:nth-of-type(1) {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg);
top: 7px;
}
.fancy-menu.active span:nth-of-type(2) {
opacity: 0;
}
.fancy-menu.active span:nth-of-type(3) {
-webkit-transform: rotate3d(0,0,1,-45deg);
transform: rotate3d(0,0,1,-45deg);
top: -9px;
}
$('.fancy-menu').click(function(e) {
e.preventDefault();
$(this).toggleClass('active');
});
See the Pen Fancy Animated Hamburger Menu by Amber Weinberg (@amberweinberg) on CodePen.