Simple Off-canvas Sidebar Nav/Pane In jQuery

A simple, fixed sidebar nav/panel jQuery plugin that can be used to create off-canvas push menus as you've seen on mobile apps.

The plugin is designed to provide a basic and minimal app-style navigation template for your cross-platform web apps.

How to use it:

1. Create the HTML for the sidebar navigation.

<div id="sidebar">
  <div class="sb-main">
    <div class="sb-content">
      <h2>Your Logo</h2>
      <p>Any Content Here</p>
      <div class="close">X</div>
    </div>
  </div>
</div>

2. The example CSS styles for the sidebar & close icon.

#sidebar {
  width: 250px;
  height: 100%;
  position: fixed;
  left: -250px;
  top: 0;
  z-index: 2;
  background: #FFCD69;
}

.close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
  color: #fff;
}

3. Create a button to toggle the sidebar navigation.

<button class="sidebarToggle">Toggle Button</button>

4. Load the minified version of the SimpleSidebar plugin after jQuery.

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

5. Enable the button to toggle the sidebar navigation. That's it.

let sidebar = $('#sidebar').SimpleSidebar({

    // place main content here
    mainDiv: $('#main'),

    // toggle button
    toggleEl: $('.sidebarToggle')
    
});

6. Make the sidenbar navigation slide from the right side of the screen.

let sidebar = $('#sidebar').SimpleSidebar({

    // place main content here
    mainDiv: $('#main'),

    // toggle button
    toggleEl: $('.sidebarToggle'),

    // right side
    rtl: true

});

#sidebar {
  width: 250px;
  height: 100%;
  position: fixed;
  left: auto;
  right: -250px;
  top: 0;
  z-index: 2;
  background: #FFCD69;
}

.close {
  position: absolute;
  right: auto;
  top: 0;
  padding: 10px;
  color: #fff;
}

7. Customize the animation speed. Default: 500ms.

let sidebar = $('#sidebar').SimpleSidebar({

    // place main content here
    mainDiv: $('#main'),

    // toggle button
    toggleEl: $('.sidebarToggle'),

    // in ms
    speed: 500
    
});

8. Enable the close button to dismiss the sidebar navigation.

$('.close').click(function() {
  sidebar.toggle();
});

---

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