A menu icon base in SVG the reveals a menu when clicked. Loosely based on: http://css-tricks.com/three-line-menu-navicon/

index.html

<nav>
<a href="#" id="activateMenu">
  <svg width="30" height="30" id="icoOpen">
    <path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
    <path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
    <path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
  </svg>
  
  <svg width="30" height="30" id="ico">
    <path d="M0, -4 30, 35" stroke="#000" stroke-width="6" />
    <path d="M0, 35 30, -4" stroke="#000" stroke-width="6" />
  </svg>
  
</a>
  
<div class="menu">
  <a href="">Home</a>
  <a href="">Products</a>
  <a href="">Support</a>
  <a href="">Stuff</a>
  <a href="">About</a>
</div>
</nav>



<article>
  <h1>Mobile Menu Thingy</h1>
  <p>Just an little mobile menu thing using the memu icon as discussed at <a href="http://css-tricks.com/three-line-menu-navicon/">http://css-tricks.com/three-line-menu-navicon/</a>. The icon is was created as a SVG.</p>
  <h2>ToDo</h2>
  <p>Switch out menu icon with close icon (#ico) when menu is open. Refactor code.</p>
  
</article>

script.js

$("#activateMenu").click(function(){
  $(".menu").fadeToggle(200);
});

style.scss

@import "compass";

nav{
  margin: 30px;
}

a svg{
  transition:all .5s ease;
  
  &:hover{
    #transform:rotate(180deg); 
  }
}

#ico{
  display: none;
}

.menu{
  background: #000;
  display: none;
  padding: 5px;
  width: 320px;
  @include border-radius(5px);
  
  #transition: all 0.5s ease;
  
  a{
    display: block;
    color: #fff;
    text-align: center;
    padding: 10px 2px;
    margin: 3px 0;
    text-decoration: none;
    background: #444;
    
    &:nth-child(1){
      margin-top: 0;
      @include border-radius(3px 3px 0 0 );
    }
    &:nth-child(5){
      margin-bottom: 0;
      @include border-radius(0 0 3px 3px);
    }
    
    &:hover{
      background: #555;
    }
  }
}