Expanding Sidebar Navigation with jQuery and Bootstrap 3 - Vertical Menu

Makes use of jQuery and Bootstrap 3 framework to create a vertical sidebar menu that expands to a full navigation menu on mouse hover and collapses on mouse leave.

How to use it:

1. Load the latest version of jQuery library and the Bootstrap's stylesheet in the web page.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

2. Load the bootstrap-vertical-menu.css stylesheet in the head section for basic styles of the vertical sidebar menu.

<link rel="stylesheet" href="bootstrap-vertical-menu.css">

3. Load the Font Awesome 4 for menu icons (OPTIONAL).

<link rel="stylesheet" href="font-awesome.min.css">

4. Create a nav list for your sidebar menu.

<nav class="navbar navbar-vertical-left">
  <ul class="nav navbar-nav">
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-star"></i> 
        <span>Menu 1</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-font"></i> 
        <span>Menu 2</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-rocket"></i> 
        <span>Menu 3</span>
      </a>
    </li>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-cog"></i> 
        <span>Menu 4</span>
      </a>
    </li>
  </ul>
</nav>

5. The JavaScript (jQuery script) to add / remove selected'CSS class to the sidebar menu

$(document).ready(function() {
  $('a').click(function(event) {
    $('a').removeClass('selected');
    $(this).addClass('selected');
    event.preventDefault();
  })
});

---

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