Responsive Sidebar Navigation with JavaScript and CSS3

Preview:

Description:

Vertical Responsive Menu is a small JavaScript library which helps you create a mobile-friendly, fully responsive and space-saving sidebar navigation for your web projects. On small screens,  it will converts the sidebar navigation into an off-canvas menu with a toggle icon when the viewport’s size reaches the breakpoint specified in the CSS3 media queries (default to 992px).

How to use it:

Load the required vertical-responsive-menu.min.css stylesheet and the vertical-responsive-menu.min.js script in your project.

<link href="vertical-responsive-menu.min.css" rel="stylesheet">
<script src="vertical-responsive-menu.min.js"></script>

Create a nested nav list for the multilevel sidebar navigation as follow:

<nav class="vertical_nav">
<ul id="js-menu" class="menu">
  <li class="menu--item  menu--item__has_sub_menu">
    <label class="menu--link" title="Item 1">
      <i class="menu--icon></i>
      <span class="menu--label">Item 1</span>
    </label>
    <ul class="sub_menu">
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link sub_menu--link__active">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
    </ul>
  </li>
  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 2">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 2</span>
    </a>
  </li>
  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 3">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 3</span>
    </a>
  </li>
  <li class="menu--item  menu--item__has_sub_menu">
    <label class="menu--link" title="Item 4">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 4</span>
    </label>
    <ul class="sub_menu">
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
      <li class="sub_menu--item">
        <a href="#" class="sub_menu--link">Submenu</a>
      </li>
    </ul>
  </li>
  <li class="menu--item">
    <a href="#" class="menu--link" title="Item 5">
      <i class="menu--icon"></i>
      <span class="menu--label">Item 5</span>
    </a>
  </li>
</ul>
<button id="collapse_menu" class="collapse_menu">
  <i class="collapse_menu--icon"></i>
  <span class="collapse_menu--label">Recolher menu</span>
</button>
</nav>

You can change the breakpoint whatever you like in the CSS.

@media (min-width: 992px) {
...
}

Changelog:

07/14/2016

• Fixed Menu closes when sub menu item is clicked