Stylish Off-canvas Sidebar Plugin With jQuery - Sidebar.js

Sidebar.js is a lightweight and easy-to-use jQuery plugin that lets you create an off-screen, toggleable off-canvas sidebar for site navigation or control panels.

View more:

• Top 50 Off-canvas Navigation jQuery Plugins

How to use it:

1. Include the jQuery sidebar.js plugin's JS and CSS on the webpage.

<link href="sidebar.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="sidebar.js"></script>

2. Wrap the sidebar and main content to a container element with an unique ID 'wrapper'

<div id="wrapper">
  <aside id="side-wrapper">
    ... Sidebar Content ...
  </aside>
</div>

3. Create a trigger element inside the wrapper to toggle the sidebar.

<button type="button" data-toggle="sidebar">Sidebar Toggle</button>

4. Call the function on the '#wrapper' to active the plugin.

$('#wrapper').sidebar();

5. Customize the off-canvas sidebar with the following options.

$('#wrapper').sidebar({

  // sidebar toggle
  toggler: '[data-toggle="sidebar"]',

  // CSS class for Wrapper when Sidebar is Collapsed
  minimized: 'minimized',

  // CSS class for Wrapper Transition
  animating: 'animating',

  // transition speed
  duration: 250,

  // auto collapse sidebar on small screens
  breakpoint: 768
  
});

---

This awesome jQuery plugin is developed by Ult-UX. For more Advanced Usages, please check the demo page or visit the official website.