<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200,300' rel='stylesheet' type='text/css'>

<h1>CLICK THE NAVICON</h1>

<div class="menu">
  <span class="menu-global menu-top"></span>
  <span class="menu-global menu-middle"></span>
  <span class="menu-global menu-bottom"></span>
</div>
@import "compass/css3";

body {
  background: darken(#34c4e8, 10%);
  padding: 60px;
}
h1  {
  color: lighten(#34c4e8, 30%);
  font-family: 'Source Code Pro', sans-serif;
  font-weight: 200;
  margin: 0 0 40px;
  text-align: center;
}
.menu {
  cursor: pointer;
  margin: 0 auto;
  padding-left: 1.25em;
  position: relative;
  width: 40px;
  height: 40px;
}
.menu-global {
  backface-visibility: hidden;
  position: absolute;
  left: 0;
  border-top: 7px solid white;
  width: 100%;
  transition: 0.55s;
}
.menu-top {
  top: 0;
}
.menu-middle {
  top: 18px;
}
.menu-bottom {
  top: 36px;
}
.menu-top-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(50deg);
  transition: 0.55s 0.5s;
}
.menu-middle-click {
  opacity: 0;
}
.menu-bottom-click {
  backface-visibility: hidden;
  top: 15px;
  transform: rotate(-410deg);
  transition: 0.55s 0.5s;
}
View Compiled
var Menu = {
  
  el: {
    ham: $('.menu'),
    menuTop: $('.menu-top'),
    menuMiddle: $('.menu-middle'),
    menuBottom: $('.menu-bottom')
  },
  
  init: function() {
    Menu.bindUIactions();
  },
  
  bindUIactions: function() {
    Menu.el.ham
        .on(
          'click',
        function(event) {
        Menu.activateMenu(event);
        event.preventDefault();
      }
    );
  },
  
  activateMenu: function() {
    Menu.el.menuTop.toggleClass('menu-top-click');
    Menu.el.menuMiddle.toggleClass('menu-middle-click');
    Menu.el.menuBottom.toggleClass('menu-bottom-click'); 
  }
};

Menu.init();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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