Vertical Menu Using jQuery and Bootstrap

vertical menu using jquery and bootstrap.

How to make vertical menu for desktop web apps using jquery and bootstrap.

vertical menu using jquery and bootstrap.

Import Library

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="bootstrap-vertical-menu.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Use Script

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

Make Content

<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>
    <li>
      <a href>
        <i class="fa fa-fw fa-lg fa-users"></i> 
        <span>Menu 5</span>
      </a>
    </li>
  </ul>
</nav>