zeusdeux/animated-mobile-nav.html

## animated-mobile-nav.html
<html>
  <head>
    <style>
      .menu-icon {
        padding: 5px;
        width: 30px;
        height: 30px;
        cursor: pointer;
        text-align: center;
      }
      .menu-icon > span {
        display: block;
        margin-top: 4px;
        border-top: 2px solid #666;
        position: relative;
        -webkit-transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25);
        transition: all 0.2s cubic-bezier(.15,1.43,.46,1.25);
        margin: inherit auto;
      }
      .menu-icon:hover > span {
        border-top: 2px solid #333;
      }
      .menu-icon.active > .ln-one {
        -webkit-transform-origin: top left;
        -webkit-transform: rotate(45deg);
        -ms-transform-origin: top left;
        -ms-transform: rotate(45deg);
        transform-origin: top left;
        transform: rotate(45deg);
      }
      .menu-icon.active > .ln-two {
        border-color: transparent;
      }
      .menu-icon.active > .ln-three {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-45deg) translateY(6px) translateX(-6px);
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(-45deg) translateY(6px) translateX(-6px);
        transform-origin: left bottom;
        transform: rotate(-45deg) translateY(6px) translateX(-6px);
      }
    </style>
    <script>
      window.onload = function(){
        document.querySelector('.menu-icon').addEventListener('click',function(){
          this.classList.toggle('active'); //classList isn't supported in IE9
          //for IE9 support, use jQuery's toggleClass() method
        });
      };
    </script>
  </head>
  <body>
    <div class="menu-icon">
      <span class="ln-one"></span>
      <span class="ln-two"></span>
      <span class="ln-three"></span>
    </div>
  </body>
</html>