LHS menu

by Dhanck

HTML

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">
      <span class="glyphicon glyphicon-indent-right collapse-menu"></span>
    </a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">

  </div>
  <!-- /.navbar-collapse -->
</nav>


<nav class="navbar2 navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  
  
  <div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul>
<!-- Menu Item -->
    <li class="menuItem" data-toggle="collapse" data-target="#btn1" aria-controls="btn1">
      <span class="glyphicon glyphicon-book menuItem-icon"></span>
      <span class="menuItem-title">
      <span class="">Title next to item</span>
      <span class="glyphicon glyphicon-chevron-right arrow-img rotate2"></span>
      </span>    
  </li> 
  <div class="menuSubItem collapse" id="btn1" aria-expanded="false">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
  </div>
<!-- / Menu Item -->  
<!-- Menu Item -->
    <li class="menuItem">
      <span class="glyphicon glyphicon-book menuItem-icon"></span>
      <span class="menuItem-title">
        Title next to item
      </span>
  </li> 
<!-- / Menu Item -->  
<!-- Menu Item -->
    <li class="menuItem">
      <span class="glyphicon glyphicon-book menuItem-icon"></span>
      <span...

CSS

/* Arrow rotation */
.arrow-img{
  top:3px;
}
.rotate {
  transform: rotate(90deg);
  /*transform: rotate(180deg);*/
  transition: .3s;
}
.rotate2 {
  transform: rotate(0deg);
  transition: .3s;
}
.arrow-img{
  float:right;
}

/* Top Navbar*/

.navbar {
  border: 0px;
  border-bottom: 1px solid #fff;
  background-color: rgba(33, 29, 29, 0.95);
  border-radius: 0;
  margin-bottom: 0px;
  min-height: 40px;
  max-height: 40px;
}

.navbar-brand {
  height: 40px;
  width: 54px;
  padding: 10px 20px;
  border-right: 1px solid #fff;
}

.navbar-toggle {
  padding: 8px 8px;
  margin-top: 3px;
  margin-right: 8px;
  margin-bottom: 8px;
}


/* Side Navbar*/

.navbar2 {
  position: fixed;
  height: 100%;
  border: 0px;
  background-color: rgba(33, 29, 29, 0.95);
  border-radius: 0;
}

.navbar2 {
  width: 54px;
  margin-right: 0;
  margin-left: 0;
  overflow: hidden;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.navbar2:hover {
  width: 200px;
  margin-right: 0;
  margin-left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.navbar2-close {
  width: 0px!important;
  margin-right: 0;
  margin-left: 0;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}
.navbar2 .navbar-collapse, .navbar2 ul{
  padding-left:0;
}
.menuItem {
  display: inline-block;
  width: 200px;
  color: #fff;
  margin-bottom: -4px;
}
.menuSubItem div{
    display: inline-block;
    height: 30px;
    border-bottom: 1px solid gray;
    width: 200px;
    color: #fff;
    padding: 5px;
}
.menuItem-title {
        font-family: century gothic;
    background-color: #535252;
    height: 40px;
    width: 143px;
    display: inline-block;
    top: 0;
    float: right;
    margin: 2px 2px 0px...

JavaScript

//Hide Side Menu with header nav button
$('.collapse-menu').click(function() {
  $('.navbar2').toggleClass('navbar2-close');
});