Vertical Menu Using jQuery and Bootstrap

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

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

 

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

 

HTML CODE
<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>

 

Leave a Reply

Your email address will not be published. Required fields are marked *