<!-- Hamburger Menu -->
<a class="McButton" data="hamburger-menu">
  <b></b>
  <b></b>
  <b></b>
</a>

/* Global Styles */
body {
  margin: 0;
  padding: 0;
  background-color: hsla( 355, 75%, 56%, 1 );
}

/* Hamburger Menu */
.McButton {
  @bar-w: 44px;
  @bar-h: 3px;
  @bar-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -(@bar-w /2);
  margin-top: -(@bar-w /2);
  width: @bar-w;
  height: (@bar-w *3) /4;
  cursor: pointer;
  
  b {
    position: absolute;
    left: 0;
    width: @bar-w;
    height: @bar-h;
    background-color: @bar-color;
    &:nth-child(1) {
      top: 0;
    }
    &:nth-child(2) {
      top: 50%;
    }
    &:nth-child(3) {
      top: 100%;
    }
  }
}/* McButton */

var McButton = $("[data=hamburger-menu]");
var McBar1 = McButton.find("b:nth-child(1)");
var McBar2 = McButton.find("b:nth-child(2)");
var McBar3 = McButton.find("b:nth-child(3)");



McButton.click( function() {
  $(this).toggleClass("active");
  
  if (McButton.hasClass("active")) {
    McBar1.velocity({ top: "50%" }, {duration: 200, easing: "swing"});
    McBar3.velocity({ top: "50%" }, {duration: 200, easing: "swing"})
    			.velocity({rotateZ:"90deg"}, {duration: 800, delay: 200, easing: [500,20] });
    McButton.velocity({rotateZ:"135deg"}, {duration: 800, delay: 200, easing: [500,20] });
  } else {
    McButton.velocity("reverse");
		McBar3.velocity({rotateZ:"0deg"}, {duration: 800, easing: [500,20] })
    			.velocity({ top: "100%" }, {duration: 200, easing: "swing"});
  	McBar1.velocity("reverse", {delay: 800});
  }
});




/*$element.velocity({ 
    width: "500px",
    property2: value2
}, {
    duration: 400,
    easing: "swing",
    queue: "",
    begin: undefined,
    progress: undefined,
    complete: undefined,
    display: undefined,
    visibility: undefined,
    loop: false,
    delay: false,
    mobileHA: true
});*/