offcanvas sidebar navigation - Free Download Offcanvas Navigation With Accordion/Tree Menus - Sidebar Menu

Free Download Offcanvas Navigation With Accordion/Tree Menus – Sidebar Menu

Posted on

This time I will share jQuery Plugin and tutorial about Offcanvas Navigation With Accordion/Tree Menus – Sidebar Menu, hope it will help you in programming stack.

offcanvas sidebar navigation - Free Download Offcanvas Navigation With Accordion/Tree Menus - Sidebar Menu
File Size: 95.7 KB
Views Total: 4476
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A jQuery/Bootstrap based responsive, multi-level, SEO-friendly, mobile-compatible, off-canvas sidebar navigation created for dashboard, admin panel, web app designs.

More features:

  • Collapses and expands sub menus just like an accordion and tree.
  • Auto hides on mobile devices.
  • 2 themes: Dark and Light.
  • 2 styles: Style 1 Demo / Style 2 Demo.
  • Also provides a Skeleton for developers.

Dependencies:

How to use it:

1. Load the required resources in your Bootstrap 4 project.

01 <!-- Stylesheet -->
02 <link rel="stylesheet" href="/path/to/bootstrap.css">
03 <link rel="stylesheet" href="/path/to/fontawesome/all.css">
04 <link rel="stylesheet" href="/path/to/perfect-scrollbar.css">
05  
06 <!-- JavaScript -->
07 <script src="/path/to/jquery.js"></script>
08 <script src="/path/to/bootstrap.bundle.js"></script>
09 <script src="/path/to/perfect-scrollbar.js"></script>
10 <script src="/path/to/nanobar.js"></script>

3. Load the Sidebar Menu‘s files in the document.

1 <link rel="stylesheet" href="dist/css/sidebar.css">
2 <script src="dist/js/sidebar.menu.js"></script>

4. Create the HTML for the sidebar menu. That’s it.

01 <!-- sidebar -->
02 <nav role="navigation" class="sidebar sidebar-light rounded-0">
03  
04   <!-- sidebar menu -->
05   <div class="sidebar-menu">
06  
07     <!-- menu -->
08     <ul class="list list-unstyled list-scrollbar">
09  
10       <!-- simple menu -->
11       <li class="list-item">
12  
13         <!-- list title -->
14         <p class="list-title text-uppercase">Translate</p>
15  
16         <!-- list items -->
17         <ul class="list-unstyled">
18           <li><a href="#" class="list-link">Czech</a></li>
19           <li><a href="#" class="list-link link-current">English</a></li>
20         </ul>
21       </li>
22  
23       <!-- multi-level dropdown menu -->
24       <li class="list-item">
25  
26         <!-- list title -->
27         <p class="list-title text-uppercase">Dashboard</p>
28  
29         <!-- list items, first level -->
30         <ul class="list-unstyled">
31           <li><a href="#" class="list-link"><span class="list-icon"><i class="fas fa-home"></i></span>Home</a></li>
32           <li><a href="#" class="list-link link-arrow link-current"><span class="list-icon"><i class="fas fa-tools"></i></span>Settings</a>
33  
34             <!-- list items, second level -->
35             <ul class="list-unstyled list-hidden">
36               <li><a href="#" class="list-link">Timezone</a></li>
37               <li><a href="#" class="list-link link-current">Permissions</a></li>
38               <li><a href="#" class="list-link link-arrow">Maintenance</a>
39  
40                 <!-- list items, third level -->
41                 <ul class="list-unstyled list-hidden">
42                   <li><a href="#" class="list-link">On</a></li>
43                   <li><a href="#" class="list-link">Off</a></li>
44                 </ul>
45               </li>
46             </ul>
47           </li>
48  
49           <!-- notice info -->
50           <li>
51             <a href="#" class="list-link">
52               <div class="clearfix">
53                 <div class="float-left"><span class="list-icon"><i class="fas fa-bell"></i></span>Notice</div>