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.
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.
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" > |
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.
02 |
< nav role = "navigation" class = "sidebar sidebar-light rounded-0" > |
05 |
< div class = "sidebar-menu" > |
08 |
< ul class = "list list-unstyled list-scrollbar" > |
11 |
< li class = "list-item" > |
14 |
< p class = "list-title text-uppercase" >Translate</ p > |
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 > |
24 |
< li class = "list-item" > |
27 |
< p class = "list-title text-uppercase" >Dashboard</ p > |
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 > |
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 > |
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 > |
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 > |