Cacher is the code snippet organizer for pro developers

$('.hamburger__toggle').on('click', function(evt){
  evt.preventDefault();
  $(this).toggleClass('hamburger__toggle--open');
});

<div class="hamburger">
  <a href="#" class="hamburger__toggle">
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
    <span class="hamburger__line"></span>
  </a>
</div>

@import 'bourbon';

*{box-sizing:border-box}

.hamburger {
  @include position(absolute, 50% null null 50%);
  margin: -15px 0 0 -17px;
  
  &__toggle {
    @include transition(background 150ms ease-in-out);
    @include size(35px 30px);
    display: block;
    border-radius: 4px;
    padding: 7px 5px;
    position: relative;

    &:hover {
      background-color: #eee;
    }

    &--open {
      .hamburger__line:nth-child(1),
      .hamburger__line:nth-child(3) {
        @include transition(transform 150ms ease-in 150ms, top 150ms ease-in 0s);
      }

      .hamburger__line:nth-child(1) {
        @include transform(rotate(45deg));
        top: 7px;
      }

      .hamburger__line:nth-child(2) {
        @include transition(opacity 0s ease 150ms);
        opacity: 0;
      }

      .hamburger__line:nth-child(3) {
        @include transform(rotate(-45deg));
        top: -7px;
      }
    }
  }

  &__line {
    @include transition(transform 150ms ease-in 0s, top 150ms ease-in 150ms, opacity 300ms ease-in 0s);
    @include transform(rotate(0deg));
    @include size(100% 3px);

    display: block;
    border-radius: 6px;
    background-color: #222;
    position: relative;
    top: 0;
    opacity: 1;

    & + & {
      margin-top: 4px;
    }
  }
}