sidebar-nav

Best jQuery Treeview & jQuery tree plugin with example of jquery treeview based on collapsed..

Featured

• Bootstrap
• Font Awesome
• Tree View Style
• Cross Browser Compatible
• Responsive Design

How to use it:

Add references to jQuery library and the jQuery Sidebar Menu plugin's files into the html page.

<link rel="stylesheet" href="css/sidebar-nav.css"/> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/sidebar-nav.js"></script>

You might need to load the Bootstrap Framework and Font Awesome icons.

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

Create a nested html list for the multi-level sidebar menu.

<ul class="sidebar-menu">   <li class="header">Navigation</a></li>   <!-- start of sub menu -->   <li class="treeview">     <a href="#">       <i class="fa fa-dashboard"></i> <span>Dashboard</span>       <i class="fa fa-angle-left pull-right"></i>     </a>     <!-- start of multi level menu -->     <ul class="treeview-menu">       <li><i class="fa fa-circle-o"></i> Dashboard v1</li>       <li><i class="fa fa-circle-o"></i> Dashboard v2</li>     </ul>     <!-- end of multi level menu -->   </li>   <!-- end of sub menu -->   <li><a href="#">Default</a></li> </ul>

Initialize the plugin and we're done.

$('.sidebar-menu').SidebarNav()

Credits

• jQuery
• Bootstrap
• Font Awesome