Responsive Bootstrap Side SlideOut Menu Css3

Responsive Bootstrap Side SlideOut Menu Css3

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<script src="http://fonts.googleapis.com/css?family=Open+Sans:400,300|Raleway:400,100,200,300|Ubuntu:300,400,300italic"></script>
<h1>Resize window for responsive views</h1>
<div class="nav-container">
  <ul class="nav">
    <li class="active">
      <a href="#">
        <span class="icon-user"></span>
        <span class="text">People</span>
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-calendar"></span>
        <span class="text">Dates</span>
      </a>
      </li>
    <li>
      <a href="#">
        <span class="icon-map-marker"></span>
        <span class="text">Filter</span>
      </a>
      </li>
    <li>
      <a href="#">
        <span class="icon-picture"></span>
        <span class="text">Price</span>    
      </a>
    </li>
    <li>
      <a href="#">
        <span class="icon-cog"></span><span class="text">Options</span>
      </a>
    </li>
  </ul>
</div>

CSS

*{
  box-sizing: border-box;
}
body{
  height:100%;
  background-color: #2c2c2c;
     font: 12px/26px"Open Sans", Helvetica Neue, Arial;
   
    font-size: 1em;
    line-height: 1.4;
    min-height: 500px;
    color: #363636
}
h1{
  font-size:1em;
  text-align:center;
  color: #eee;
  letter-spacing:1px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
  width:150px;
  margin-top:10px;
  box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  transition: all 0.3s linear;
}
.nav{
  list-style-type:none;
  margin:0;
  padding:0;
}
li{
  height:50px; 
  position:relative;
   background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
    background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));
}
a {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid black;
  text-decoration:none;
  display:block;
  height:100%;
  width:100%;
  line-height:50px;
  color:#bbb;
  text-transform: uppercase;
  font-weight: normal;
  padding-left:32%;
  border-left:5px solid transparent;
  letter-spacing:0px;
  transition: all 0.3s linear;
        
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
}
.active a{
  color: #3242b9;
  border-left:5px solid #3242b9;
  background-color: #222222;
  outline:0;

}
li:not(.active):hover a{
  color: #eee;
  border-left: 5px solid #FCFCFC;
  background-color: #1B1B1B;
}
span[class ^= "icon"]{
  position:absolute;
  left:20px;
  font-size: 1.5em;
  transition: all 0.3s linear;
}

@media only screen and (max-width : 860px){
  
  .text{
    display:none;
  }
  
  .nav-container , a{
    width: 70px;
    
  }
   
  a:hover{
    width:200px; 
    z-index:1;
    border-top: 1px solid...

JavaScript

$('li').click(function(){
  
  $(this).addClass('active')
       .siblings()
       .removeClass('active');
    
});