Hidden Sidebar Menu HTML

 HTML CODE

<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>

CSS  (SCSS) CODE

@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); }

  }

}

JS CODE

(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);