Side navigation is a sleek jquery animated menu that is both intuitive and flexible. It's a nice way to extend your site's navigation by providing users with extra menus on the sidebars. The side navigation comes with two jquery effects; on-click - which expands the sub menus on menu click (the default jquery effect) or on-hover - which expands the sub menus when you hover on the top most menu. You can use the side navigation on any sidebar - left or right

On click Event

The on-click event is the default jquery effect. All you need to do is add your vertical menu using the following HTML Syntax for it to work. To get the current menu to show in expanded mode, use the active class on the ul level: <ul class="active">

• View code

  <div class="box vmenublock">
  <div class="box-body vmenublock-body">
  <div class="box vmenublockcontent">
  <div class="box-body vmenublockcontent-body">
  
  <ul class="vmenu">
  <li><a href="#" class="active">Menu 1</a>
  	<ul class="active">
  	<li><a href="#">Sub menu</a></li>
  	<li><a href="#">Sub menu</a></li>
  	<li><a href="#">Sub menu</a></li>
  	</ul>
  </li>	
  <li><a href="#">Menu 3</a></li>	
  </ul>
  
  <div class="cleared"></div>
  </div>
  </div>
  <div class="cleared"></div>
  </div>
  </div>

On Hover Event

The on hover event can be effected by adding the "auto" class to the ul menu. To get the current menu to show expanded, use the active class on the ul level: <ul class="active">

• View code

  <div class="box vmenublock">
  <div class="box-body vmenublock-body">
  <div class="box vmenublockcontent">
  <div class="box-body vmenublockcontent-body">
  
  <ul class="vmenu auto">
  <li><a href="#" class="active">Menu 1</a>
  	<ul class="active">
  	<li><a href="#">Sub menu</a></li>
  	<li><a href="#">Sub menu</a></li>
  	<li><a href="#">Sub menu</a></li>
  	</ul>
  </li>	
  <li><a href="#">Menu 3</a></li>	
  </ul>
  
  <div class="cleared"></div>
  </div>
  </div>
  <div class="cleared"></div>
  </div>
  </div>