Flexible Off-canvas Side Panel Plugin - Simpler Sidebar

A simple, flexible sidebar jQuery/JavaScript 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.

More Demos:

• With CSS3 Transitions
• Vanilla JavaScript Version

How to use it:

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

<div id="sidebar">
  <div class="sidebar-wrapper">
    <a href="#" class="quit-sidebar">Menu Link 1</a>
    <a href="#" class="quit-sidebar">Menu Link 2</a>
    <a href="#" class="quit-sidebar">Menu Link 3</a>
    ...
  </div>
</div>

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

<nav>
  <span id="menu" class="icon">
    <!-- Toggle Button Icon Here -->
  </span>
  <span class="expand"></span>
</nav>

3. The example CSS for the sidebar panel.

nav {
  position: sticky;
  top: 0;
  display:flex;
  align-items: center;
  height: 56px;
  background-color: #9a031e;
  color: white;
}

.icon {
  padding: 12px;
  font-size: 24px;
  cursor: pointer;
}

nav .expand {
  flex: 1;
}

nav a {
  color: inherit;
  text-decoration: none;
}

#sidebar {
  background-color: #5F0F40;
  color: white;
}

.sidebar-wrapper {
  padding: 12px;
  overflow-y: auto;
  height: 100%;
}

4. Load the Simpler Sidebar plugin's files in the document.

<!-- jQuery Version -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- For additional easing functions. OPTIONAL -->
<script src="/path/to/cdn/jquery-ui.min.js"></script>
<!-- No CSS3 Transitions -->
<script src="/path/to/lib/jquery.simpler-sidebar.min.js"></script>
<!-- With CSS3 Transitions  -->
<script src="/path/to/lib/jquery.simpler-sidebar-css3.min.js"></script>

<!-- Vanilla JavaScript Version -->
<script src="/path/to/lib/vanilla-sidebar.min.js"></script>

5. Initialize the sidebar panel and done.

// jQuery Version
$("#sidebar").simplerSidebar({
  toggler: "#menu",
  quitter: ".quit-sidebar",
});

// Vanilla JS Version
var sidebar = new VanillaSidebar({
    selector: "#sidebar",
    triggerer: "#menu",
    quitter: ".quit-sidebar"
});

6. Customize the background overlay.

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

7. Customize the open/close animations.

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

8. Full plugin options.

// jQuery Version
$("#sidebar").simplerSidebar({
  // element that triggers the close action
  quitter: "a",
  // data attribute assigned to the elements
  attr: "sidebar-main",
  // open the sidebar on init
  open: false,
  // right, left
  align: "left",
  // top position
  top: 0,
  // width
  width: 300,
  // gap
  gap: 64,
  // z-index property
  zIndex: 3000,
  // disable page scrolling when the sidebar is opened
  freezePage: true,
  animation: {
    duration: 500,
    easing: "swing",
  },
  mask: {
    display: true,
    css: {
      backgroundColor: "black",
      opacity: 0.5,
      filter: "Alpha(opacity=50)",
    },
  },
});

// Vanilla JS Version
var sidebar = new VanillaSidebar({
    selector: "#sidebar",
    triggerer: "#menu",
    quitter: ".quit-sidebar",
    mask: true,
    align: "left", // or 'right'
    top: "56px",
    width: "300px",
    gap: 56,
    opened: false,
    easing: "ease-in-out",
    zIndex: 3000,
});

9. Event handlers.

$("#sidebar").simplerSidebar({
  events: {
    onOpen: function () {},
    afterOpen: function () {}, 
    onClose: function () {}, 
    afterClose: function () {}, 
    always: function () {},
  },
});

10. API methods.

var sidebar = new VanillaSidebar({
    // ...
});
sidebar.open();
sidebar.close();

Changelog:

2022-09-14

• Vanilla JS version: fix: sidebar popups when screen is resized

2022-09-12

• Updated vanilla JS version
• Added more demos
• Updated doc

---

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