Burger menu button

Let’s say you need a burger button to toggle your primary menu which as the class primary-menu

The HTML markup

<span class="menu-toggle" data-toggle=".primary-menu">
   <span class="menu-toggle-lines"></span>
</span>
<nav class="primary-menu">
   .... your menu items ....
</nav>

The CSS you need is the following:

$space: 10px;
$width: 30px;
$lines_height: 4px;
$width_small: 25px;
$width_smaller: 15px;

.menu-toggle {
   width: $width;
   height: $width;
   position: absolute;
   display: block;
   top: 15px;
   right: 15px;
   z-index: 999;
   cursor: pointer;

   &:hover {
      .menu-toggle-lines {
         width: $width_small;
      }
      .menu-toggle-lines:before,
      .menu-toggle-lines:after {
         width: $width_smaller;
         margin-left: -1 * $width_smaller / 2;
      }
   }

   &.active {
      .menu-toggle-lines {
         background-color: rgba(0, 0, 0, 0.0);
         transition-delay: 0.2s;

         &:before {
            margin-top: 0;
            transform: rotate(45deg);
            transition-delay: 0s, 0.2s;
         }
         &:after {
            margin-top: 0;
            transform: rotate(-45deg);
            transition-delay: 0s, 0.2s;
         }
      }
   }

}

.menu-toggle-lines {
   height: $lines_height;
   background-color: $c_white;
   display: block;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   width: $width;
   margin: 0 auto;
   transition-property: margin, transform, width;
   transition-duration: 0s;
   transition-delay: 0.2s;
   transition: width 1s;

   &:before,
   &:after {
      position: absolute;
      z-index: 10;
      content: '';
      width: $width;
      height: $lines_height;
      background-color: $c_white;
      display: block;
      left: 50%;
      margin-left: -1 * $width/2;
      transition-property: margin, transform, width;
      transition-duration: 0.2s;
      transition-delay: 0.2s, 0s;
   }

   &:before {
      margin-top: -1 * $space;
   }
   &:after {
      margin-top: $space;
   }
}

and the JS you need:

$('.menu-toggle').on('click', (e) => {
   $(e.currentTarget).toggleClass('active');
   $($(e.currentTarget).data('toggle')).toggleClass('active');
});

See example in codepen http://codepen.io/rizopoulos/pen/EyQRQz