herrkessler · April 25, 2016 13:47
diff --git a/menu-icon.jade b/menu-icon.jade
 a(href="#").js-mobile-menu#menu-icon
    span
    span
    span
diff --git a/menu-icon.js b/menu-icon.js
 $(document).ready(function() {

  var navLink = $('#menu-icon'),
      menu = $('#menu');

  navLink.on('click', function() {
    menu.toggleClass('active');
    $(this).toggleClass('active');
    $('body').toggleClass('menu-active');
  });

 });
diff --git a/menu-icon.scss b/menu-icon.scss
 #menu-icon {
  display: none;
  cursor: pointer;
  @include size(30px);
  @include media("<=phone") {
    display: block;
  }
  span {
    @include size(100% 2px);
    transition: all 0.3s ease-out;
    display: block;
    margin-bottom: 4px;
    background: white;
  }
  &.black {
    span {
      background: black;
    }
  }
  &.active {
    span {
      &:first-child {
        transform: translateY(6px) rotate(-45deg);
      }
      &:nth-child(2) {
        opacity: 0;
      }
      &:last-child {
        transform: translateY(-6px) rotate(45deg);
      }
    }
  }
 }