Mobile menu button with animation #sass #jquery

mobile_menu.scss

// SCSS

$menu-bars-color: #000;

%span-menu {
  backface-visibility: hidden;
  background-color: $menu-bars-color;
  border-radius: 2px;
  height: 4px;
  transition: all .3s;
  width: 100%;
}

.menu-toggle {
  float: right;
  height: 30px;
  margin: 24px 20px 10px;
  width: 28px;

  span {
    @extend %span-menu;
    display: inline-block;
    position: relative;

    &::after,
    &::before {
      @extend %span-menu;
      content: '';
      left: 0;
      position: absolute;
      top: -9px;
    }

    &::after {
      top: 9px;
    }
  }

  // on menu activation
  &.on {
    span {
      background-color: transparent;

      &::before {
        transform: rotate(45deg) translate(5px, 5px);
      }

      &::after {
        transform: rotate(-45deg) translate(7px, -8px);
      }
    }

    & + #menu {
      opacity: 1;
      visibility: visible;
    }
  }
}


// JS

// Toggle menu.
$('.menu-toggle').click(function(e) {
  e.preventDefault();
  $(this).toggleClass('on');
  $('header nav').slideToggle();
});


// PUG

a(href="#menu", class="menu-toggle") #[span]

// HTML

<a href="#menu" class="menu-toggle"><span></span></a>