jEqzzw

index.html

<a href="#" class="menu-icon">
  <div class="line"></div>
</a>

jEqzzw.markdown

jEqzzw

A Pen by Captain Anonymous on CodePen.

License.

script.js

$('.menu-icon').click(function() {
  $(this).toggleClass('toggle');
});

style.scss

@import "bourbon";
.menu-icon {
  padding:1rem;
  display:block;
  &.toggle {
    &:before, &:after {
      opacity:0;
    }
    .line {
      @include transform(rotate(45deg));
      &:before {
        @include transform(rotate(-90deg));
      }
    }
  }
  .line {
    width:2rem;
    height:2px;
    background:#000;
    @include transition(all 0.3s ease);
    &:before {
      content:"";
      width:2rem;
      height:2px;
      background:#000;
      display:block;
      @include transition(all 0.3s ease);
    }
  }
  &:before, &:after {
    content:"";
    width:2rem;
    height:2px;
    background:#000;
    display:block;
    margin-bottom:0.5rem;
    @include transition(all 0.3s ease);
  }
  &:after {
    margin-top:0.5rem;
  }
}