They call it le Big-Mac

index.html

<div class='container'>
  <div class='burger'>
    <div class='burger__line-top'></div>
    <div class='burger__line-mid'></div>
    <div class='burger__menu'>
      <p>MENU</p>
    </div>
  </div>
  <div class='stuff'><a href='http://codepen.io/mrspok407/' class='pens' target="_blank">Check out my other pens</a><a href="https://twitter.com/mrspok407" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a></div>
</div>

script.babel

$(document).ready(function() {
  var $burger = $('.burger'),
      $topLine = $('.burger__line-top'),
      $midLine = $('.burger__line-mid'),
      $menuLine = $('.burger__menu'),
      anim = false;

  var changeClasses = {
    addActive: function() {
      for (var i = 0; i <= 2; i++) {
        $burger.children().eq(i).removeClass('reverseLine' + (i + 1)).addClass('activeLine' + (i + 1));
      }
    },
    addReverse: function() {
      for (var i = 0; i <= 2; i++) {
        $burger.children().eq(i).removeClass('activeLine' + (i + 1)).addClass('reverseLine' + (i + 1));
      }
    }
  }

  var timeouts = {
    initial: function(child, Y, rot, scale) {
      $burger.children().eq(child).css('transform', 'translateY(' + Y + 'px) rotate(' + rot + 'deg) scale(' + scale + ',1)');
    },
    afterActive: function() {
      // ES6
      setTimeout(()=> {
        this.initial(0, 12, 45, 1.40);
        this.initial(1, -12, -45, 1.40);
        this.initial(2, 35, 0, 1);
        $burger.children().eq(2).css('opacity', '0');
        anim = true;
      }, 1300);
      // With bind()
      // setTimeout(function() {
      //   this.initial(0, 12, 45, 1.40);
      //   this.initial(1, -12, -45, 1.40);
      //   this.initial(2, 35, 0, 1);
      //   $burger.children().eq(2).css('opacity', '0');
      //   anim = true;
      // }.bind(this), 1300);
    },
    beforeReverse: function() {
      setTimeout(()=> {
        for (var i = 0; i <= 2; i++) {
          this.initial(i, 0, 0, 1);
        }
        $burger.children().eq(2).css('opacity', '1');
        anim = false;
      }, 1300);
    }
  }

  $burger.on('click', function() {
    if (!anim) {
      changeClasses.addActive();
      timeouts.afterActive();
    } else if (anim) {
      changeClasses.addReverse();
      timeouts.beforeReverse();
    }
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.scss

*,
*:after,
*:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.stuff {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  .pens {
    margin-right: 20px;
    text-decoration: none;
    font-size: 20px;
    font-family: 'Open Sans', sans serif;
    color: #f2f2f2;
    &:hover {
      text-decoration: underline;
    }
  }
  .fa-twitter {
    position: relative;
    top: 8px;
    color: #1DA1F2;
    font-size: 50px;
  }
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #FF6100;
}

.activeLine1 {
  transform-origin: left center;
  animation: activeTop 1.3s forwards;
  @keyframes activeTop {
    20% {
      transform: translateY(-6px) rotate(0deg)
    }
    40% {
      transform: translateY(15px) rotate(48deg) scale(1.40, 1)
    }
    60% {
      transform: translateY(7px) rotate(42deg) scale(1.40, 1)
    }
    100% {
      transform: translateY(12px) rotate(45deg) scale(1.40, 1)
    }
  }
}

.activeLine2 {
  transform-origin: right center;
  animation: activeMid 1.3s forwards;
  @keyframes activeMid {
    20% {
      transform: translateY(-8px) rotate(0deg)
    }
    40% {
      transform: translateY(-3px) rotate(-45deg) scale(1.30, 1)
    }
    60% {
      transform: translateY(-18px) rotate(-45deg) scale(1.40, 1)
    }
    100% {
      transform: translateY(-12px) rotate(-45deg) scale(1.40, 1)
    }
  }
}

.activeLine3 {
  animation: activeMenu .5s forwards;
  @keyframes activeMenu {
    40% {
      transform: translateY(-7px);
      opacity: 1
    }
    60% {
      transform: translateY(-7px);
      opacity: 1
    }
    70% {
      opacity: 1
    }
    100% {
      transform: translateY(35px);
      opacity: 0
    }
  }
}

.reverseLine1 {
  transform-origin: left center;
  animation: reverseTop 1.5s forwards;
  @keyframes reverseTop {
    15% {
      transform: translateY(3px) rotate(-3deg) scale(1, 1)
    }
    30% {
      transform: translateY(-14px) rotate(-10deg) scale(1, 1)
    }
    40% {
      transform: translateY(4px) rotate(5deg) scale(1, 1)
    }
    60% {
      transform: translateY(-2px) rotate(-3deg) scale(1, 1)
    }
    100% {
      transform: translateY(0px) rotate(0deg)
    }
  }
}

.reverseLine2 {
  transform-origin: right center;
  animation: reverseMid 1.5s forwards;
  @keyframes reverseMid {
    20% {
      transform: translateY(0px) rotate(13deg) scale(1, 1)
    }
    40% {
      transform: translateY(-6px) rotate(-9deg) scale(1, 1)
    }
    60% {
      transform: translateY(8px) rotate(6deg) scale(1, 1)
    }
    100% {
      transform: translateY(0px) rotate(0deg)
    }
  }
}

.reverseLine3 {
  transform-origin: right center;
  animation: reverseMenu 1.65s forwards;
  @keyframes reverseMenu {
    30% {
      transform: translateY(-20px) rotate(0deg) scale(1, 1);
      opacity: 1;
    }
    40% {
      transform: translateY(9px) rotate(-10deg) scale(1, 1);
      opacity: 1;
    }
    60% {
      transform: translateY(-5px) rotate(5deg) scale(1, 1);
      opacity: 1;
    }
    100% {
      transform: translateY(0px) rotate(0deg);
      opacity: 1;
    }
  }
}

.burger {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 71px;
  height: 71px;
  cursor: pointer;
  &__line-top {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 1px 0 #fff;
  }
  &__line-mid {
    margin-top: 17px;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 1px 0 #fff;
  }
  &__menu {
    margin-top: 10px;
    p {
      text-align: center;
      font: {
        size: 20px;
        family: 'Open Sans', sans-serif;
        weight: 900;
      }
      color: #fff;
      text-shadow: 0 0 1px #fff;
      letter-spacing: 3px;
    }
  }
}

they-call-it-le-big-mac.markdown

They call it le Big-Mac

Based on https://dribbble.com/shots/2776607-menu-transition

A Pen by Ruslan Pivovarov on CodePen.

License.