<a id="hamburger-icon" href="#" title="Menu">
  <span class="line line-1"></span>
  <span class="line line-2"></span>
  <span class="line line-3"></span>
</a>
<h1>Click to see the animation</h1>
<a href="https://twitter.com/stevenfabre" title="Follow me on twitter">@stevenfabre</a>
<a href="http://stevenfabre.com" title="Read my blog">stevenfabre.com</a>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

$background: #3d566e;
$color: #ecf0f1;

$height-icon: 50px;
$width-line: 100px;
$height-line: 8px;

$transition-time: 0.4s;
$rotation: 45deg;
$translateY: ($height-icon / 2);
$translateX: 0;

body {
  background: $background;
  color: $color;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align:center;
}

#hamburger-icon {
  width:$width-line;
  height:$height-icon;
  position:relative;
  display:block;
  margin: ($height-icon * 2) auto $height-icon auto;
  
  .line {
    display:block;
    background:$color;
    width:$width-line;
    height:$height-line;
    position:absolute;
    left:0;
    border-radius:($height-line / 2);
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
    
    &.line-1 {
      top:0;
    }
    &.line-2 {
      top:50%;
    }
    &.line-3 {
      top:100%;
    }
  }
  &:hover, &:focus {
     .line-1 {
        transform: translateY($height-line / 2 * -1);
        -webkit-transform: translateY($height-line / 2 * -1);
        -moz-transform: translateY($height-line / 2 * -1);
     }
    .line-3 {
        transform: translateY($height-line / 2);
        -webkit-transform: translateY($height-line / 2);
        -moz-transform: translateY($height-line / 2);
    }  
  }
  &.active {
    .line-1 {
      transform: translateY($translateY) translateX($translateX) rotate($rotation);
      -webkit-transform: translateY($translateY) translateX($translateX) rotate($rotation);
      -moz-transform: translateY($translateY) translateX($translateX) rotate($rotation);
    }
    .line-2 {
      opacity:0;
    }
    .line-3 {
      transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
      -webkit-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
      -moz-transform: translateY($translateY * -1) translateX($translateX) rotate($rotation * -1);
    }
  }
}

h1 {
  text-transform:uppercase;
}
a {
  text-decoration:none;
  color:#95a5a6;
  margin: 0.5em 1.5em;
  display:inline-block;
  &:hover, &:focus {
    color:$color;
  }
}
$( document ).ready(function() {
  var hamburger = $('#hamburger-icon');
  hamburger.click(function() {
     hamburger.toggleClass('active');
     return false;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js