<div id="menu-btn">
  <span class="icon"></span>
  <span class="text">MENU</span>
</div>
<a class="credits" href="https://dribbble.com/shots/2776607-menu-transition" target="_blank">Graphic Credits</a>

$red: #ff6100;
$mainFont: 'Candal', sans-serif;
$anim_time: 1s;


//OPEN

@keyframes topBar_open {
  0% { transform: translateY(0px) rotate(0deg) ; width: 60px; }
  10% {transform: translateY(-8px) rotate(0deg); width: 60px; }
  50% {transform: translateY(25px) rotate(45deg); width: 84px; }
  75% {transform: translateY(12px) rotate(45deg); width: 84px; }
  100% {transform: translateY(17px) rotate(45deg); width: 84px; }
}

@keyframes bottomBar_open {
  0% { transform: translateY(0px) rotate(0deg) ; width: 60px; }
  10% { transform: translateY(-8px) rotate(0deg) ; width: 60px; }
  60% {transform: translateY(0px) rotate(-45deg); width: 84px; }
  75% {transform: translateY(-10px) rotate(-45deg); width: 84px; }
  100% {transform: translateY(-8px) rotate(-45deg); width: 84px; }
}

@keyframes menuLabel_open {
  0% { transform: translateY(0px); opacity: 1; }
  25% {transform: translateY(-18px); }
  45% {transform: translateY(44px); opacity: 1; }
  48% {transform: translateY(50px); opacity: 0; }
  100% {transform: translateY(30px); opacity: 0; }
}

// CLOSE


@keyframes topBar_close {
  0% {transform: translateY(17px) rotate(45deg); width: 84px; }
  35% {transform: translateY(-8px) rotate(-4deg); width: 60px; }
  53% {transform: translateY(10px) rotate(3deg); width: 60px; }
  70% {transform: translateY(-6px) rotate(0deg); width: 60px; }
  100% { transform: translateY(-2px) rotate(0deg) ; width: 60px; }
}

@keyframes bottomBar_close {
  0% {transform: translateY(-8px) rotate(-45deg); width: 84px; }
  35% {transform: translateY(-18px) rotate(6deg); width: 60px; }
  53% {transform: translateY(0px) rotate(-3deg); width: 60px; }
  68% { transform: translateY(-7px) rotate(0deg) ; width: 60px; }
  100% { transform: translateY(0px) rotate(0deg) ; width: 60px; }
}

@keyframes menuLabel_close {
  0% {transform: translateY(30px); opacity: 0; }
  5% {transform: translateY(25px); opacity: 1; }
  25% {transform: translateY(-30px); opacity: 1; }
  37% {transform: translateY(-22px); opacity: 1; }
  45% {transform: translateY(-22px); opacity: 1; }
  58% {transform: translateY(8px) rotate(-10deg); opacity: 1; }
  83% {transform: translateY(-6px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(0px); opacity: 1; }
}

body {
  background-color: $red;
}

#menu-btn {
  display: block;
  position: relative;
  margin: 70px auto;
  text-align: center;
  width: 60px;
  height: 65px;
  
  &:before,
  &:after {
    content: '';
    width: 100%;
    height: 8px;
    background-color: #FFF;
    display: block;
    position: absolute;
    border-radius: 20px;
  }
  
  &:before {
     transform-origin: left center;
    
  }
  
  &:after {
    right: 0;
    top: 25px;
    transform-origin: right center;
  }
  
  .text {
    color: #FFF;
    font-family: $mainFont;
    display: block;
    position: absolute;
    bottom: 0;
    font-size: 17px;
    letter-spacing: 2.5px;
  }
  
  &:hover {
    cursor: pointer;
  }
  
  &.open {    
    &:before {
      animation: topBar_open $anim_time ease-in-out;
      animation-fill-mode: forwards;
    }
    
    &:after {
      animation: bottomBar_open $anim_time ease-in-out;
      animation-fill-mode: forwards;
    }
    
    .text {
      animation: menuLabel_open $anim_time ease-in;
      animation-fill-mode: forwards;
    }
    
  }
  
  &.close {    
    &:before {
      animation: topBar_close $anim_time ease-in-out;
      animation-fill-mode: forwards;
    }
    
    &:after {
      animation: bottomBar_close $anim_time ease-in-out;
      animation-fill-mode: forwards;
    }
    
    .text {
      animation: menuLabel_close $anim_time ease-in;
      animation-fill-mode: forwards;
    }
    
  }
}

.credits {
  display: block;
  color: white;
  width: 100%;
  font-family: $mainFont;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.6;
}

var $button = $('#menu-btn');

$button.on('click', function(e){
    e.preventDefault();
    if( $button.hasClass('open') ){
      $button.removeClass('open');
      $button.addClass('close');
    } else {
      $button.removeClass('close');
      $button.addClass('open');
    }
});