Top and LHS Nav 3 States

2 Navs one on the top and one on the side with three states (minimal, expanded and hidden)

by Dhanck

HTML

<nav class="navbar navbar-inverse" 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 collapse-menu" href="#" class="dropdown-toggle" data-toggle="dropdown">
  
          <img src="http://demov4.vermilionreporting.com/VermilionWeb/vrs4gui/images/corp-logo.png" class="vrs-logo">
        </a>
-->
  </div>

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

    <!-- Navbar Links -->
    <ul class="nav navbar-nav">
      <li class="dropdown menu-large">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <img src="http://demov4.vermilionreporting.com/VermilionWeb/vrs4gui/images/corp-logo.png" class="vrs-logo">
        </a>
        <ul class="dropdown-menu megamenu row" style="display: none;">
          <li style="display: flex;">

            <div class="thumbnail-box pink">
              <a href="#" class="">
              </a>
              <span class="glyphicon glyphicon-folder-open thumbnail-icon"></span>
              <span class="thumbnail-title">Tasks</span>
            </div>


            <div class="thumbnail-box2 blue">
              <a href="#" class="">
              </a>
              <span class="glyphicon glyphicon-folder-open thumbnail-icon"></span>
              <div class="thumbnail-menu">
                <span class="glyphicon glyphicon-chevron-down thumbnail-menu-icon"></span>
              </div>
              <span class="thumbnail-title">Tasks</span>
              <div class="thumbnail-pop-menu blue"...

CSS

html {
  background-image: url('http://demov4.vermilionreporting.com/VermilionWeb/images/backgrounds/city.jpg');
  background: cover;
}


/* 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;
  right:0;
}

.navbar2 {
  width: 250px;
  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-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-right: 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;
  font-size: 13px;
  background-color: #535252;
  height: 40px;
  width: 143px;
  display: inline-block;
  top: 0;
  float: right;
  margin: 2px 2px 0px 0px;
  padding: 10px 5px 10px 5px;
}

.menuItem-icon {
  width: 50px;
 ...

JavaScript

//Hide Side Menu with header nav button
$('.collapse-menu').click(function() {
  $('.navbar2').toggleClass('navbar2-close');
});
// MegaMenu tile popups   
$('.thumbnail-menu-icon').click(function() {
  $('.thumbnail-pop-menu').toggle();
});

jQuery('.navbar2').hover(
  function() {
    console.log('mouse over');
    $(".navbar2").css("background", "#3E3E3D");
    //$('.menuSubItem').addClass('in');
    console.log('submenuitem show');
    return false;
  },
  function() {
    console.log('mouse out');
    $(".navbar2").css("background", "");
    SubMenuId();
    console.log('id from open item', $(this, '.collapse .in').attr('id'));
    $('.menuSubItem').removeClass('in');
    console.log('submenuitem hide');
    return false;
  }
);
/* Store SubMenu Id */
function storeLocaly() {
  var localy = ('#') + localStorage.getItem("id2open");
  $(localy).addClass('in');
}
/* Set SubMenu Id to return */
function SubMenuId() {
  if ($('.collapse').hasClass('in')) {
    localStorage.setItem("id2open", $('.collapse .in').attr('id'));
  }
};


// Dropdown MegaMenu Fade    

$(".dropdown").hover(
  function() {
    $('.dropdown-menu', this).stop().fadeIn("fast");
  },
  function() {
    $('.dropdown-menu', this).stop().fadeOut("fast");
  });