Flexible Off-canvas Side Panel Plugin - Simpler Sidebar

A simple, flexible sidebar jQuery plugin to create mobile app-style off-canvas panels for side menus, drawer navigation, and any other panel types such as notifications, settings, social sharing widgets, and more.

How to use it:

1. Insert your content (like menu items, social icons, etc) into the sidebar panel.

<div class="sidebar" id="sidebar-left">
  <div class="sidebar-wrapper">
    Any Element Here
  </div>
</div>

2. Add a sidebar panel toggle button to your navbar.

<!--div.appbar-->
<div class="appbar">
  <div class="appbar-item appbar-menu-icon" id="toggle-sidebar-left">
    <img
      src="./static/images/icon-menu-24px-x2.png"
      width="24px"
      alt="Menu Icon"
    />
  </div>
  <div class="appbar-item appbar-title">
    <h6>Simpler Sidebar</h6>
  </div>
</div>
<!--div.appbar-offset-->
<div class="appbar-offset"></div>

3. The example CSS for the sidebar panel.

.appbar {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 56px;
  display: flex;
  align-content: space-between;
  background-color: lightseagreen;
  align-items: center;
  line-height: 0;
  padding: 0 4px;
  color: #212121;
}

.appbar-item.appbar-menu-icon {
  padding: 8px;
  cursor: pointer;
}

.appbar-item.appbar-title {
  margin-left: 8px;
}

.appbar-item.appbar-title h6 {
  font-size: inherit;
  font-weight: normal;
}

.appbar-offset {
  display: block;
  height: 56px;
}

.sidebar {
  background-color: blueviolet;
}

.sidebar-wrapper {
  overflow-y: auto;
  padding: 0 8px;
}

4. Load the minified version of the jQuery Simpler Sidebar plugin in the document.

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

5. Initialize the sidebar panel and done.

$("#sidebar-left").simplerSidebar({
  align: "left", // default: 'right'
  selectors: {
    trigger: "#toggle-sidebar-left",
    quitter: ".quit-sidebar-left"
  }
});

6. Customize the background overlay.

$("#sidebar-left").simplerSidebar({
  mask: {
    display: true,
    css: {
      backgroundColor: "black",
      opacity: 0.5,
      filter: "Alpha(opacity=50)",
    }
  }
});

7. Customize the open/close animations.

$("#sidebar-left").simplerSidebar({
  animation: {
    duration: 500,
    easing: "swing"
  }
});

8. Specify the width of the sidebar panel.

$("#sidebar-left").simplerSidebar({
  sidebar: {
    width: 300,
  }
});

9. Event handlers.

$("#sidebar-left").simplerSidebar({
  events: {
    on: {
      animation: {
        open: function () {},
        close: function () {},
        both: function () {},
      },
    },
    callbacks: {
      animation: {
        open: function () {},
        close: function () {},
        both: function () {},
        freezePage: true,
      },
    },
  }
});

10. More default configurations.

$("#sidebar-left").simplerSidebar({
  attr: "simplersidebar",
  top: 0,
  gap: 64,
  zIndex: 3000
});

---

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