Simple Off-canvas Sidebar Navigation Plugin with jQuery

Simple Sidebar is a lightweight and highly customizable jQuery plugin for creating an off-canvas sidebar navigation sliding out from the left/right side of your browser window. When you click the toggle icon, the plugin pushes your main content to the left/right and generates a mask laying over the document content with a smooth fade-in animation. This project is licensed under the GPL 2.0.

How to use it:

1. Include the necessary jQuery library and the jQuery simple sidebar plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.simplesidebar.js"></script>

2. Include the optional jQuery UI for easing effects.

<script src="jquery.simplesidebar.js"></script>

3. Create a toggle button to open the sidebar navigation.

<div class="toolbar">
  <div id="open-sb" class="menu-button menu-left"></div>
</div>

4. The sample CSS for the toggle button.

.toolbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;
  line-height: 68px;
  border-top: 2px solid #1abc9c;
}

.menu-button {
  position: relative;
  margin: 5px;
  height: 36px;
  width: 36px;
  cursor: pointer;
}

.menu-button:before {
  content: "";
  position: absolute;
  top: 5px;
  right: 3px;
  border-bottom: 17px double #1abc9c;
  border-top: 6px solid #1abc9c;
  width: 30px;
  height: 5px;
}

.menu-left {
  float: left;
  margin-right: 1.5em;
}

4. Create a sidebar navigation as follows.

<section class="sidebar">
  <nav>
    <h6>Menu</h6>
    <ul>
      <li><a href="#"> Item 1 </a></li>
      <li><a href="#"> Item 2 </a></li>
      <li><a href="#"> Item 3 </a></li>
      <li><a href="#"> Item 4 </a></li>
      <li><a href="#"> Item 5 </a></li>
    </ul>
    <hr>
    <h6>More menus</h6>
    <ul>
      <li><a href="#"> Item 6 </a></li>
      <li><a href="#"> Item 7 </a></li>
      <li><a href="#"> Item 8 </a></li>
      <li><a href="#"> Item 8 </a></li>
      <li><a href="#"> Item 10 </a></li>
    </ul>
  </nav>
</section>

5. The sample CSS to style the sidebar navigation.

.sidebar {
  margin: 0;
  padding-top: 1em;
  color: white;
  background-color: #1abc9c;
}

.sidebar h6 {
  margin: 0 .8em;
  padding: 0;
  font-weight: 300;
}

.sidebar li {
  margin: .5em 0;
  padding: 0 1em;
  line-height: 32px;
}

.sidebar li:hover { background-color: #e84e40; }

.sidebar hr {
  margin: 2em auto;
  border: 0;
  padding: 0;
  width: 80%;
  height: 1px;
  background-color: white;
}

6. Wrap the sidebar navigation and main content in a container element. The entire Html structure should be like this:

<div class="wrapper"> 
  <!--main content-->
  
  <div class="toolbar">
    <div id="open-sb" class="menu-button menu-left"></div>
  </div>
  
  <section class="sidebar">
    <nav> 
      <!--Siderbar navigation--> 
    </nav>
  </section>
  
</div>

7. Call the plugin and set the options for the sidebar navigation.

$( document ).ready(function() {
$( '.sidebar' ).simpleSidebar({
settings: {
  opener: '#open-sb',
  wrapper: '.wrapper',
  animation: {
    duration: 500,
    easing: 'easeOutQuint'
    }
  },
sidebar: {
  align: 'left',
  width: 200,
  closingLinks: 'a',
  }
});
});

8. Global settings

opener: undefined, // the selector that fire the animation.
wrapper: undefined, // the selector for the wrapper/container div/section that holds all content.
ignore: undefined, // the selector for all elements that must be ignored.
data: 'ssbplugin', // the data-attribute for the new elements that the plug-in creates.
animation: {
  duration: 500, // DURATION of the animation
  easing: 'swing' // easing of the animation. Requires jQuery UI or jQuery easing plugin.
}

9. All sidebar navigation settings.

align: undefined, // 'left', 'right'.
width: 350, // the WIDTH and MAXWIDTH of the $sidebar.
gap: 64, // the GAP between the end of the sidebar
closingLinks: 'a', // the selector that will fire the $sidebar closing animation.
style: { //  You can add more style here
  zIndex: 3000 // position the sidebar above ALL content and to position the "mask div" one level below the sidebar.
}

10. Mask settings

mask: {
  style: { //You can add more options.
    backgroundColor: 'black', // if you do not want any color use 'transparent'.
    opacity: 0.5, // if you do not want any opacity use 0.
    filter: 'Alpha(opacity=50)' // IE8 and earlier - If you do not want any opacity use 0.
}
}

Change logs:

2015-02-26

• v1.1.1

2014-08-05

• Fixed a bug about adding elements dynamically

2014-07-29

• update to 1.0.2

---

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