Multi-level Sidebar Push Navigation With jQuery And CSS3

A jQuery & CSS based, multi-level, app-like revealing menu & sidebar navigation system especially suitable for dashboard & admin panel. Hover over the side toolbar to reveal the whole sidebar navigation. Click on the hamburger button to reveal the whole sidebar navigation while pushing the main content to the right.

How to use it:

1. Create the sidebar navigation following the markup structure as displayed below. Note that this example uses Font Awesome for the icons.

<div class="primary-nav">
  <button href="#" class="hamburger open-panel nav-toggle">
    <span class="screen-reader-text">Menu</span> 
  </button>
  <nav role="navigation" class="menu">
    <a href="#" class="logotype">Logo Here</a>
    <div class="overflow-container">
      <ul class="menu-dropdown">
        <li><a href="#">Dashboard</a><span class="icon"><i class="fa fa-dashboard"></i></span></li>
        <li class="menu-hasdropdown">
          <a href="#">Social</a>
          <span class="icon"><i class="fa fa-share-alt"></i></span>
          <label title="toggle menu" for="settings"> 
            <span class="downarrow"><i class="fa fa-caret-down"></i></span> 
          </label>
          <input type="checkbox" class="sub-menu-checkbox" id="settings" />
          <ul class="sub-menu-dropdown">
            <li><a href="">Facebook</a> <span class="icon"><i class="fa fa-facebook"></i></span></li>
            <li><a href="">Twitter</a> <span class="icon"><i class="fa fa-twitter"></i></span></li>
            <li><a href="">Instagram</a> <span class="icon"><i class="fa fa-instagram"></i></span></li>
          </ul>
        </li>
        <li><a href="#">Settings</a><span class="icon"><i class="fa fa-gear"></i></span></li>
        <li><a href="#">Messages</a><span class="icon"><i class="fa fa-envelope"></i></span></li>
      </ul>
    </div>
  </nav>
</div>

2. The primary CSS/CSS3 styles for the sidebar navigation.

.primary-nav {
  position: fixed;
  z-index: 999;
}

.menu { position: relative; }

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-panel {
  border: none;
  background-color: #fff;
  padding: 0;
}

.hamburger {
  background: #fff;
  position: relative;
  display: block;
  text-align: center;
  padding: 13px 0;
  width: 50px;
  height: 73px;
  left: 0;
  top: 0;
  z-index: 1000;
  cursor: pointer;
}

.hamburger:before {
  content: "\2630"; /* hamburger icon */
  display: block;
  color: #000;
  line-height: 32px;
  font-size: 16px;
}

.openNav .hamburger:before {
  content: "\2715"; /* close icon */
  display: block;
  color: #000;
  line-height: 32px;
  font-size: 16px;
}

.hamburger:hover:before { color: #777; }

.primary-nav .menu li { position: relative; }

.menu .icon {
  position: absolute;
  top: 12px;
  right: 10px;
  pointer-events: none;
  width: 24px;
  height: 24px;
  color: #fff;
}

.menu, .menu a, .menu a:visited {
  color: #aaa;
  text-decoration: none!important;
  position: relative;
}

.menu a {
  display: block;
  white-space: nowrap;
  padding: 1em;
  font-size: 14px;
}

.menu a:hover { color: #fff; }

.menu { margin-bottom: 3em; }

.menu-dropdown li .icon { color: #777; }

.menu-dropdown li:hover .icon { color: #fff; }

.menu label {
  margin-bottom: 0;
  display: block;
}

.menu label:hover { cursor: pointer; }

.menu input[type="checkbox"] { display: none; }

input#menu[type="checkbox"] { display: none; }

.sub-menu-dropdown { display: none; }

.new-wrapper {
  position: absolute;
  left: 50px;
  width: calc(100% - 50px);
  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}

#menu:checked + ul.menu-dropdown {
  left: 0;
  -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
  animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
}

.sub-menu-checkbox:checked + ul.sub-menu-dropdown {
  display: block!important;
  -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
  animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
}

.openNav .new-wrapper {
  position: absolute;
  transform: translate3d(200px, 0, 0);
  width: calc(100% - 250px);
  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}

.downarrow {
  background: transparent;
  position: absolute;
  right: 50px;
  top: 12px;
  color: #777;
  width: 24px;
  height: 24px;
  text-align: center;
  display: block;
}

.downarrow:hover { color: #fff; }

.menu {
  position: absolute;
  display: block;
  left: -200px;
  top: 0;
  width: 250px;
  transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  background-color: #000;
  z-index: 999;
}

.menu-dropdown {
  top: 0;
  overflow-y: auto;
}

.overflow-container {
  position: relative;
  height: calc(100vh - 73px)!important;
  overflow-y: auto;
  border-top: 73px solid #fff;
  z-index: -1;
  display: block;
}

.menu a.logotype {
  position: absolute!important;
  top: 11px;
  left: 55px;
  display: block;
  font-family: 'Work Sans', sans-serif;
  text-transform: uppercase;
  font-weight: 800;
  color: #000;
  font-size: 21px;
  padding: 10px;
}

.menu a.logotype span { font-weight: 400; }

.menu a.logotype:hover { color: #777; }

.sub-menu-dropdown { background-color: #333; }

.menu:hover {
  position: absolute;
  left: 0;
  top: 0;
}

.openNav .menu:hover {
  position: absolute;
  left: -200px;
 top 73px;
}

.openNav .menu {
 top 73px;
  transform: translate3d(200px, 0, 0);
  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}

3. Insert the needed jQuery JavaScript library at the end of the html document.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script> 

4. The JavaScript (jQuery script) to toggle the CSS classes when the navigation is shown and hidden.

$('.nav-toggle').click(function(e) {
  
  e.preventDefault();
  $("html").toggleClass("openNav");
  $(".nav-toggle").toggleClass("active");

});

---

This awesome jQuery plugin is developed by blindpiggy. For more Advanced Usages, please check the demo page or visit the official website.