Fancy Animated Hamburger Menus

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.