Responsive Nav - 3 Lines Turn Into an X when Clicked

x-nav.html

<!-- An example of this exact code can be found live at http://thesocietea.org/ - just shrink the screen down -->

<nav class="nav">
  <ul>
    <li>
      <a id="responsive-menu-icon">
        <span class="line-one"></span>
        <span class="line-two"></span>
        <span class="line-three"></span>
      </a>
    </li>
  </ul>
</nav>

x-nav.jquery.js

$(document).ready(function(){
  $('#responsive-menu-icon').click(function(){
    $(this).toggleClass('active-mobile');
  });
});

x-nav.scss

// Written assuming Compass is installed

span.line-one   { top: 7px;  }
span.line-two   { top: 14px; }
span.line-three { top: 21px; }

#responsive-menu-icon {
  display: block;
  position: relative;
  width: 25px;
  height: 25px;
  span {
    @include transition(all 0.35s ease-in-out);
    height: 3px;
    width: 25px;
    background-color: white;
    display: block;
    position: absolute;
    right: 0;
  }
  &.active-mobile {
    span.line-one, span.line-two {
      top: 14px;
      @include rotate(45deg);
    }
    span.line-three {
      top: 14px;
      @include rotate(-45deg);
    }
  }
}