Powerful Side Navigation Menu Plugin With jQuery - simpler-sidebar

Yet another jQuery sidebar navigation plugin which lets you create an animated, app-style, fully configurable off-canvas side menu for the desktop or mobile web pages.

Basic usage:

1. Include the jQuery simpler-sidebar plugin and other required JavaScript libraries on the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>
<script src="jquery.simpler-sidebar.min.js"></script>

2. The html structure to create a sidebar navigation that will slide out from the right side of the browser.

<div class="main-sidebar main-sidebar-right" id="main-sidebar">
  <div class="main-sidebar-wrapper" id="main-sidebar-wrapper">
    <nav>
      <ul>
        <li class="close-sb">
          <a href="#">Link (1)</a>
        </li>
        <li class="close-sb">
          <a href="#">Link (2)</a>
        </li>
        <li class="close-sb">
          <a href="#">Link (3)</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

3. Create a trigger element to toggle the sidebar navigation.

<div class="main-navbar main-navbar-fixed-top" id="main-navbar">
  <div class="main-navbar-content">
    <div class="icon right" id="toggle-sidebar">
      <img alt="menu" height="24px" src="assets/[email protected]" width="24px">
    </div>
  </div>
</div>

4. The core CSS styles for the sidebar navigation.

.main-navbar {
  position: relative;
  background-color: #F44336;
  color: white;
  z-index: 10;
}

.main-navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 42px;
}

.main-navbar-content { padding: 4px 16px; }

.left { float: left; }

.right { float: right; }

.icon {
  position: relative;
  width: 32px;
  height: 32px;
}

.icon img {
  position: absolute;
  top: 4px;
  left: 4px;
}

.main-sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: #B71C1C;
  color: white;
  width: 300px;
}

.main-sidebar-right {
  right: 0;
  text-align: right;
}


.main-sidebar-wrapper {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1em;
}

5. Initialize the plugin and done.

$( "#main-sidebar" ).simplerSidebar( {
  selectors: {
    trigger: "#toggle-sidebar",
    quitter: ".close-sb"
  }
});

6. All default options.

// The html attr that is added to specific elements in order to make them selecteble and tweakable.
//  Assign different values to attr if you run multiple instances.
attr: "simplersidebar",

// Add the amount of px used by the top navbar if you want the navbar to be always displayed.
top: 0,

// The gap in pixel between the window and the sidebar left side (or right according to the chosen align, ie: right-aligned side left, left-aligned right side).
gap: 64,

// The object that stores all available selectors.
selectors {

  // This select the html item that will trigger the animation. 
  // The item can be a menu icon for example.
  trigger: '',

  // By default it will select all `a` elements in the sidebar. 
  // However you should choose assign a class to all elements in the sidebar that will trigger the closing animation, even links, in order to avoid using the `a` selector.
  quitter: 'a'
},

zIndex: 3000,

// All sidebar options.
sidebar: {

  // The width musn't be overridden by common stylesheets on inline css. 
  // If you want to change the sidebar width, just edit the amount in pixels.
  width: 300
},

// The object that stores all animations option.
animation: {
  duration: 500,
  easing: "swing"
},

// Changing these options will break the plugin
events: {
  on: {
    animation: {
      open: function() {},
      close: function() {},
      both: function() {}
    }
  },
  callbacks: {
    animation: {
      open: function() {},
      close: function() {},
      both: function() {},
      freezePage: true
    }
  }
},

// The *mask* is a div that will add an overlay to the content beneath the sidebar while the sidebar is opened.
mask: {

  display: true,

  // A javascript object that stores all css attributes. 
  // If you don't need to change the attributes above, use a simple stylesheet.
  css: {
    backgroundColor: "black",
    opacity: 0.5,
    filter: "Alpha(opacity=50)"
  }
}

Change logs:

v2.2.5 (2018-03-06)

• Bugfix

v2.2.4 (2018-01-04)

• Fixed 'overflow: initial' causes IE's scrollbar to disappear forever

v2.2.3 (2017-11-14)

• Change the 'unfreezePage' value of 'overflow' to 'initial'.

v2.2.0 (2016-12-05)

• fix UMDjs IIFE, fix init-open scroll option, improvements

v2.1.4 (2016-08-09)

• Fix "init: opened" issue

v2.0.4 (2016-08-09)

• bugfix

2016-07-26

• Improved options list.
• Fix the multiple instances bug.
• Add the ability to set custom functions to run when/after all the animations are triggered.
• Add the ability to scroll the page when the sidebar is opened.
• Add more detailed and improved docs stored in the doc folder.
• Fix npm package, doc folder is now shipped.

---

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