Animated hamburger

Here's a quick tutorial on how to add an animated hamburger icon as used on this website.

The icon

First, head on over to this amazing collection of animated hamburger icons, download the CSS and follow the instructions. You should now have HTML looking something like this:

<button id="my-icon" class="hamburger hamburger--collapse" type="button">
   <span class="hamburger-box">
      <span class="hamburger-inner"></span>
   </span>
</button>

If you need your hamburger icon to be fixed, try wrapping it in a DIV and use the fixedElements add-on.

<div class="Fixed">
   <button id="my-icon" class="hamburger hamburger--collapse" type="button">
      <span class="hamburger-box">
         <span class="hamburger-inner"></span>
      </span>
   </button>
</div>

The menu

Second (and last), create the menu and use the API to open the menu and to animate the icon. Add a small timeout to ensure the rest of the page is finished animating for a smoother animation.

var $menu = $("#my-menu").mmenu({
   //   options
});
var $icon = $("#my-icon");
var API = $menu.data( "mmenu" );

$icon.on( "click", function() {
   API.open();
});

API.bind( "open:finish", function() {
   setTimeout(function() {
      $icon.addClass( "is-active" );
   }, 100);
});
API.bind( "close:finish", function() {
   setTimeout(function() {
      $icon.removeClass( "is-active" );
   }, 100);
});