Animated drawer icon

burger.css

.hamburger {
  position: relative;
  width: 20px;
  height: 40px;
  .patty {
    position: absolute;
    display: block;
    width: 20px;
    height: 1px;
    background: #fff;
    @include transition(all .15s ease-in-out);
    &:first-child {
      top: 0;
    }
    &:nth-child(2) {
      top: 5px;
    }
    &:last-child {
      top: 10px;
    }
  }
}

.drawer-active {
  .patty {
    &:first-child {
      top: 5px;
      @include rotate(45deg);
    }
    &:nth-child(2) {
      background: transparent !important;
    }
    &:last-child {
      top: 5px;
      @include rotate(-45deg);
    }
  }
}

burger.html.haml

.drawer
  = link_to "#", class: "hamburger drawer-toggle" do
    .patty
    .patty
    .patty

burger.js

$('.drawer-toggle').click(function(){
  $('.drawer').toggleClass('.drawer-active');
});