<header>
    <div id="toggle">
      <span>
        <i class="fa fa-bars"></i> Menu
      </span>
    </div>
    <div id="menu">
      <ul class="unstyled-list">
        <li> 
          <span class="book"></span> 
          <i class="fa fa-book"></i> 
          Books &amp; Audible
        </li>
        <li>
          <span class="movies"></span> 
          <i class="fa fa-music"></i> 
          Movies, Music &amp; Games
        </li>
        <li>
          <span class="computer"></span> 
          <i class="fa fa-television"></i> 
          Computers &amp; Electronics
        </li>
        <li>
          <span class="home"></span> 
          <i class="fa fa-tint"></i> 
          Home, Garden &amp; Tools
        </li>
        <li>
          <span class="beauty"></span> 
          <i class="fa fa-heartbeat"></i> 
          Beauty, Health &amp; Grocery
        </li>
        <li>
          <span class="clothing"></span> 
          <i class="fa fa-shopping-bag"></i> 
          Clothing, Shoes &amp; Jewelry
        </li>
        <li>
          <span class="sport"></span> 
          <i class="fa fa-futbol-o"></i> 
          Sports &amp; Outdoors
        </li>
      </ul>
    </div>
  </header>

/* Start Global Styles */
*{
  padding: 0;
  margin: 0
}
body{
  font-family: sans-serif;
  height: 665px; 
  background-color: #ddd; 
}
.unstyled-list{
  list-style: none;
  padding: 0;
  margin: 0
}
/* End Global Styles */
.open{
  left: 0!important;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
header{
  left: -300px;
  position: relative;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
div#toggle{ 
  transform: rotate(-90deg);
  position: absolute;
  top: 166px;
  left: 234px;
  background: #62778d;
  padding: 10px;
  text-align: center;
  width: 150px;
  color: #fff;
  cursor: pointer;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: -4px 5px 20px -5px #787979;
}
div#menu{
  position: relative;
  width: 300px;
  background-color: #fff;
  border-radius: 6px 0;
  box-shadow: 0 6px 20px -9px #263238;
  top: 100px;
}
div#menu ul{  
  overflow: hidden;
  text-align: left;
}
div#menu ul li{
  z-index: 2;
  padding: 10px 0 10px 10px;
  position: relative;
  cursor: pointer;
}
div#menu ul li:hover{
  color: #fff;
}
div#menu ul li span{
  z-index: -1;
  display: inline-block;
  width: 3px;
  height: 100%;
  background-color: #26778D;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
  -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transition: .5s cubic-bezier(1, 1.78, 0, 0.71);
}
div#menu ul li:hover span{
  width: 100%;
  box-shadow: 0 4px 5px #B0BEC5
}
div#menu ul li:hover span.book{
  background-color: #AD1457;
  /*border-top-right-radius: 6px;*/
}
div#menu ul li:hover span.movies{
  background-color: #1976D2;
}
div#menu ul li:hover span.computer{
  background-color: #EF5350
}
div#menu ul li:hover span.home{
  background-color: #E91E63
}
div#menu ul li:hover span.beauty{
  background-color: #8E24AA
}
div#menu ul li:hover span.clothing{
  background-color: #64B5F6
}
div#menu ul li:hover span.sport{
  background-color: #388E3C;
  border-bottom-right-radius: 6px;
}
div#menu ul li i{
  width: 20px;
  text-align: center;
}

$(document).ready(function() {
  $('#toggle').on('click', function() {
    $('header').toggleClass('open')
  });
});