This time I will share jQuery Plugin and tutorial about Dynamic Sidebar Menu (Off-canvas Nav) In jQuery, hope it will help you in programming stack.
| File Size: | 16.4 KB |
|---|---|
| Views Total: | 1 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
An easy and configurable jQuery sidebar menu (also called off-canvas side nav) that allows you to dynamically add menu items via JavaScript.
How to use it:
1. Append the main script sidebar.js after jQuery library.
|
1 2 |
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/js/sidebar.js"></script> |
2. Create a container to hold the sidebar menu.
|
1 |
<div id="sidebar"></div> |
3. Create a menu toggle button inside your main content.
|
1 2 3 |
<button id="sidebar-open"> Open Sidebar <a href="https://www.jqueryscript.net/menu/">Menu</a> </button> |
4. Determine your menu links in a JS object as follows:
|
1 2 3 4 5 6 7 8 |
let menuItems = { 'Home': '/home', 'Dashboard': '/dashboard', 'Profile': '/profile', 'Latest': '/latest', 'Up<a href="https://www.jqueryscript.net/time-clock/">date</a>s': '/updates', 'News': '/news' } |
5. Initialize the plugin and inject those menu links to the sidebar menu.
|
1 2 3 |
$('#sidebar').Sidebar({ items: menuItems }); |
6. Customize the appearance of the sidebar menu.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
$('#sidebar').Sidebar({ // header text header: 'Header', // header link headerRef: '#', // menu width width: 120, // background color sidebarColor: 'gray', // color of close button closeButtonColor: 'black', // color of header text headerColor: 'white', // text color textColor: 'white', // text alignment textAlign: 'left', // customize the close icon here closeButtonIcon: '&times;' }); |
7. All default selectors.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$('#sidebar').Sidebar({ // trigger ID openTriggerId: 'sidebar-open', // close ID closeTriggerId: 'sidebar-close', // default CSS classes sidebarClass: 'sidebar-menu', headerClass: 'sidebar-header', itemsClass: 'sidebar-item', closeButtonClass: 'sidebar-close', }); |
