Versatile Off-canvas Aspect Panel Plugin – Easier Sidebar

A easy, versatile sidebar jQuery plugin to create cellular app-style off-canvas panels for aspect menus, drawer navigation, and some other panel sorts comparable to notifications, settings, social sharing widgets, and extra.

Find out how to use it:

1. Insert your content material (like menu gadgets, social icons, and so on) into the sidebar panel.

<div class="sidebar" id="sidebar-left">
  <div class="sidebar-wrapper">
    Any Component Right 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/photographs/icon-menu-24px-x2.png"
      width="24px"
      alt="Menu Icon"
    />
  </div>
  <div class="appbar-item appbar-title">
    <h6>Easier Sidebar</h6>
  </div>
</div>
<!--div.appbar-offset-->
<div class="appbar-offset"></div>

3. The instance CSS for the sidebar panel.

.appbar {
  place: absolute;
  high: 0;
  proper: 0;
  left: 0;
  peak: 56px;
  show: flex;
  align-content: space-between;
  background-color: lightseagreen;
  align-items: heart;
  line-height: 0;
  padding: 0 4px;
  colour: #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: regular;
}

.appbar-offset {
  show: block;
  peak: 56px;
}

.sidebar {
  background-color: blueviolet;
}

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

4. Load the minified model of the jQuery Easier Sidebar plugin within the doc.

<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 completed.

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

6. Customise the background overlay.

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

7. Customise the open/shut animations.

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

8. Specify the width of the sidebar panel.

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

9. Occasion handlers.

$("#sidebar-left").simplerSidebar({
  occasions: {
    on: {
      animation: {
        open: operate () {},
        shut: operate () {},
        each: operate () {},
      },
    },
    callbacks: {
      animation: {
        open: operate () {},
        shut: operate () {},
        each: operate () {},
        freezePage: true,
      },
    },
  }
});

10. Extra default configurations.

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

Changelog:

2022-09-12

• Updated vanilla JS model

2022-09-08

This superior jQuery plugin is developed by ctrlmaniac. For extra Superior Usages, please verify the demo web page or go to the official web site.