Responsive & Fluid Sidebar Plugin with jQuery and Hammer.js

A jQuery, hammer.js based sidebar plugin that creates responsive, fluid, mobile first on- and off-canvas navigation panels for your website and web app.

Features:

• Supports touch gestures based on hammer.js.
• Helps you create a regular off-canvas navigation for both mobile or desktop devices.
• Displays an on-canvas navigation on desktop and auto convert it into an off-canvas menu on mobile device. See Demo.
• Reveals an off-canvas sidebar navigation with a toggle button.
• Styled with Bootstrap 3.

Basic Usage:

1. Load Bootstrap's stylesheet together with Font Awesome 4 and sidebar.css into your document's head section.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" >
<link href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" >
<link href="css/sidebar.css" rel="stylesheet">

2. Load the necessary jQuery JavaScript framework and hammer.js at the end of the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>

3. Make sure to load the sidebar.js after jQuery library but before the closing body tag.

<script src="js/sidebar.js"></script>

4. Create the Html for your sidebar navigation. Add the data-sidebar="true" attribute to the parent element for auto initialization.

<div class="sidebar-wrapper sidebar-default">
  <div class="sidebar-scroller">
    <ul class="sidebar-menu">
      <li class="sidebar-group">
        <span>Header 1</span>
        <ul class="sidebar-group-menu">
          <li class="sidebar-item"><a href="#">Item 1</a></li>
          <li class="sidebar-item"><a href="#" class="active">Item 2</a></li>
          <li class="sidebar-item"><a href="#">Item 3</a></li>
        </ul>
      </li>
      <li class="sidebar-group">
        <span>Header 2</span>
        <ul class="sidebar-group-menu">
          <li class="sidebar-item"><a href="#">Item 4</a></li>
          <li class="sidebar-item"><a href="#">Item 5</a></li>
          <li class="sidebar-item"><a href="#">Item 6</a></li>
        </ul>
      </li>
      <li class="sidebar-item"><a href="#">Item 7</a></li>
      <li class="sidebar-item"><a href="#">Item 8</a></li>
      <li class="sidebar-item"><a href="#">Item 9</a></li>
    </ul>
  </div>
</div>

5. Default plugin options.

classWrapper:       'sidebar-wrapper',
classContainer:     'container-main',
classOpen:          'sidebar-open',
classLocked:        'sidebar-locked',
classForceOpen:     'sidebar-force-open',
classOnDragging:    'sidebar-dragging',
classObfuscator:     'sidebar-obfuscator',
forceToggle:        Sidebar.FORCE_TOGGLE_NO,
locked:             false,
position:           Sidebar.POSITION_LEFT,
minLockWidth:       992,
toggleId:           null,
toggleOpenOnHover:  false,
toggleOnClick:      false,
saveConfig:         false,
storageLockedKey:   'st/sidebar/locked',
clickableSwipe:     false,
draggable:          true,
closeOnSelect:      true,
closeOnSelectDelay: 0.5,
resetScrollDelay:   0.3,
itemSelector:       '.sidebar-menu a',
useScroller:        true,
scrollerScrollbar:  undefined,
scroller:           {
  contentSelector: '.sidebar-menu',
  scrollerStickyHeader: true,
  stickyOptions: {
      selector: '> .sidebar-menu > .sidebar-group > span'
  }
},
hammer:             {},
disabledKeyboard:   false,
keyboardEvent:      {
  ctrlKey:  true,
  shiftKey: false,
  altKey:   true,
  keyCode:  'S'.charCodeAt(0)
}

Change logs:

2017-08-09

• Add clickable swipe option to toggle the sidebar
• Fire the animation end only for animations of sidebar element

2017-08-08

• Fix force-open class for the init

2017-06-10

• Fix click event of link on drag action only for FF IE and Edge

2017-03-24

• Fix the tap item with firefox

2017-01-09

• Fix drag start on chrome and firefox

2016-11-27

• Fix reset transition after the resize of window

2016-07-02

• Fix reset transition after the resize of window

2016-06-24

• Add obfuscator background and scroll locker of body
• Add native scroll width in unlock bosy scroll event

2016-03-11

• Add isClosable method

2016-03-10

• Trigger opened and closed events on end of transition

2016-03-09

• Do not close the sidebar on resizing window

2015-10-03

• Do not close the sidebar on resizing window

2015-09-30

• Fix attributes on destroy

2015-09-20

• Fix hammer pan with firefox mobile

2015-09-16

• Fix smooth scrolling on ios
• Fix scroll on ios

2015-08-26

• Fix horizontal pan on scrolling

2015-08-23

• Add sidebar full locked
• Add sticky header options

---

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