Easy jQuery Responsive Sliding Sidebar Plugin - Simple SideBar

Simple SideBar is a jQuery plugin for creating responsive, animated, left & right sidebars that can be used for mobile app-style off-canvas navigation, sliding menu, toggle navigation menu, and more.

How to use it:

1. Include jQuery library and the jQuery simple sidebar plugin on the web page.

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

2. Create the HTML for the sidebar.

<div class="sidebar" id="sidebar-main">
  <div class="wrapper">
    <nav>
      <ul>
        Sidebar Items Here
      </ul>
    </nav>
  </div>
</div>

3. Create a sticker header with toggle buttons to open the sidebar.

<div class="navbar main" id="navbar-main">
  <div id="sidebar-main-trigger" class="icon float-left">
    <img src="./assets/imgs/icon-menu-24px-x2.png" width="24px" alt="Menu Icon" />
  </div>
</div>

4. The sample CSS to style the sidebar.

/* sticky navbar */
.navbar.main {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  padding: 0 4px;
  height: 56px;
  line-height: 56px;
  background-color: #29b6f6;
  -webkit-box-sizig: border-box
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 5;
  -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
  box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.5);
}

.navbar.main::after {
  content: "";
  display: table;
  clear: both;
}

.navbar.main * {
  display: inline-block;
}

.navbar.main a {
  text-decoration: none
}

.navbar.main .icon {
  padding: 0 8px;
  cursor: pointer;
}

.float-left {
  float: left;
}

/* sidebar styles */
.sidebar {
  position: fixed;
  top: 56px;
  bottom: 0;
  width: 300px;
  background-color: #fafafa;
  left: -300px;
}

#sidebar-main {
  top: 56px;
}

.float-right {
  float: right;
}
.float-left {
  float: left;
}

4. Initialize the plugin to create a basic sidebar.

$("#sidebar-main").simplerSidebar( {
  align: "left",
  attr: "sidebar-main",
  selectors: {
    trigger: "#sidebar-main-trigger"
  }
});

5. All possible options with default values.

$("#sidebar-main").simplerSidebar( {
  attr: "simplersidebar",
  align: "left", // or right
  top: 0,
  gap: 64,
  zIndex: 3000,
  sidebar: {
    width: 300,
  },
  animation: {
    duration: 500,
    easing: "swing",
  },
  events: {
    // Changing these options will break the plugin
    on: {
      animation: {
        open: function () {},
        close: function () {},
        both: function () {},
      },
    },
    callbacks: {
      animation: {
        open: function () {},
        close: function () {},
        both: function () {},
        freezePage: true,
      },
    },
  },
  mask: {
    display: true,
    css: {
      backgroundColor: "black",
      opacity: 0.5,
      filter: "Alpha(opacity=50)",
    },
  },
});

Changelog:

2.2.5 (2020-06-19)

• update dependencies

1.2.2 (2015-05-07)

• Fixed headers.

1.2.0 (2015-05-04)

• CHANGED: sidebar.style --> sidebar.css,mask.style --> sidebar.css
• ADDED: subWrapper.css, subwrapper.css.position: 'relative'

1.1.2 (2015-03-22)

• FIXED - scrollbar bug;
• DELETED - onClose callback.

---

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