sidebar-menu-jquery-plugin

[Off-canvas] Dynamic Sidebar Menu in jQuery Plugin

by

The sidebar plugin is an easy and configurable sidebar menu from jQuery also called sidebar navigation off the panel that lets you add menu items dynamically via JavaScript.

off canvas sidebar codepen, off canvas sidebar for mobile, bootstrap off canvas navbar, off canvas menu codepen, multi level sidebar menu bootstrap

How to make use of it:

1. Append the principle script sidebar.js after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/sidebar.js"></script>

2. Create a container to carry the sidebar menu.

<div id="sidebar"></div>

3. Create a menu toggle button inside your essential content.

<button id="sidebar-open">
  Open Sidebar Menu
</button>

4. Determine your menu links in a JS object as follows:

let menuItems = {
    'Home': '/home',
    'Dashboard': '/dashboard',
    'Profile': '/profile',
    'Latest': '/latest',
    'Updates': '/updates',
    'News': '/news'
}

5. Initialize the plugin and inject these menu links to the sidebar menu.

$('#sidebar').Sidebar({
  items: menuItems
});

6. Customize the looks of the sidebar menu.

$('#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.

$('#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',

});

Dynamic Sidebar Menu, Sidebar plugin/Github, off canvas menu examples, jquery sidebar menu with submenu, off canvas menu jquery

See Demo And Download

Demo
Download

Official Website(povstenko): Click Here

This superior jQuery/javascript plugin is developed by povstenko. For extra Advanced Usages, please go to the official website.

Leave a Comment