<nav>
  <a href="" id="menuToggle" title="show menu">
    <span class="navClosed"><i>show menu</i></span>
  </a>
  <a href="#" title="Item 1">Item 1</a>
  <a href="#" title="Item 2">Item 2</a>
  <a href="#" title="Item 3">Item 3</a>
  <a href="#" title="Item 3">Item 4</a>
</nav>

@import "compass/css3";

/* Color Declarations */
$White:	rgb(255,255,255);
$Black:	rgb(0,0,0);

$LightOrange:	rgb(255,165,62);

/* Color Config */
$NavBG: rgba($Black, .6);
$MenuItem: $LightOrange;
$MenuTextColor: $White;

/* Menu Config */
$AnimationTime: .2s;
$NavMarkerHeight: 40px;
$NavMarkerWidth: 50px;
$NavWidth: 300px;


html, body {
  font-family: 'Open Sans', sans-serif;
  font-wight: 100;
  height: 100%;
  margin: 0;
  padding: 0; }

//A quick background to show off transparency
body{ background: url(https://i.imgur.com/oiX1bgx.jpg) }

a
{
  text-decoration: none;
  i {
    font: 0/0 a;
    text-shadow: none;
    color: transparent; } 
}  
 
nav 
{
  background-color: $NavBG;
  height: 100%;
  position: fixed;
  right: $NavWidth * -1;
  top: 0;
  @include transition(right $AnimationTime linear);
  width: $NavWidth;
  z-index: 9001; /* IT'S OVER 9000! */
  #menuToggle
  {
    background: $NavBG;
    display: block;
    position: relative;
    height: $NavMarkerHeight;
    left: $NavMarkerWidth * -1;
    top: 75px;
    width: $NavMarkerWidth;
    span
    {
      background: $MenuTextColor;
      display: block;
      height: 10%;
      left: 10%;
      position: absolute;
      top: 45%;
      width: 80%;
      &:before, &:after {
        background: $MenuTextColor;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        top: -250%;
        @include transform(rotate(0deg));
        width: 100%; }
      &:after {
        top: 250%; }
    }
  }
  a:nth-child(n+2)
  {
    color: $MenuTextColor;
    display: block;
    font-size: 2.5em;
    margin: 30px 0 30px 30px;
    &:after {
      background: $MenuItem;
      content: '';
      display: block;
      height: 2px;
      @include transition(width $AnimationTime);
      width: 0; }
    &:hover:after {
      width: 100%; }
  }
}
.open 
{
  right: 0;
  #menuToggle
  {
    span
    {
      background: transparent;
      left: 10%;
      top: 45%;
      &:before, &:after {
        background: $MenuTextColor;
        top: 0;
        @include transform(rotate(45deg)); }
      &:after {
        @include transform(rotate(-45deg)); }
    }
  }
}

#menuToggle
{
  .navClosed
  {
    @include transition(background $AnimationTime/2 linear);
    &:before, &:after {
      @include transition(top $AnimationTime linear $AnimationTime/2, transform $AnimationTime linear $AnimationTime/2); }
  }
  .navOpen
  {
    @include transition(background $AnimationTime/2 linear $AnimationTime);
    &:before, &:after {
      @include transition(top $AnimationTime linear, transform $AnimationTime linear); }
  }
}

(function($){
	// Menu Functions
	$(document).ready(function(){
  	$('#menuToggle').click(function(e){
    	var $parent = $(this).parent('nav');
      $parent.toggleClass("open");
      var navState = $parent.hasClass('open') ? "hide" : "show";
      $(this).attr("title", navState + " navigation");
			// Set the timeout to the animation length in the CSS.
			setTimeout(function(){
				console.log("timeout set");
				$('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
			}, 200);
    	e.preventDefault();
  	});
  });
})(jQuery);