Multipurpose Sidebar Drawer Plugin - SlideOutPanel

A multi-purpose, highly customizable, mobile-friendly drawer (slide out panel) plugin designed for off-canvas menus, sidebar navigation, settings panels, feedback forms and much more.

Features:

• Pushes or covers the main content when the drawer is opened.
• Slides out from the left/right/top/bottom of the screen.
• Smooth and high-performance transitions based on CSS3.
• Custom drawer close icon.
• You can also Click on the background overlay or Press the ESC key to close the drawer.

How to use it:

1. To begin, include jQuery library and the SlideOutPanel plugin's files on the page.

<link href="/path/to/dist/css/slide-out-panel.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/js/slide-out-panel.js"></script>

2. Then insert your content (header/body/footer) to the drawer panel.

<div id="slide-out-panel" class="slide-out-panel">
  <header>Header</header>
  <section>Body</section>
  <footer>Footer</footer>
</div>

3. Finnaly, call the function SlideOutPanel on the top container and we're done.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      // settings here
});

4. Open, close or toggle the drawer when needed.

slideOutPanel.open();
slideOutPanel.close();
slideOutPanel.toggle();

5. Determine from which position the drawer slides out when triggered. Default: 'right'.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      slideFrom: 'left' // or 'right', 'top', 'bottom'
});

6. Determine whether to push the body to the other side when the drawer is triggered. Default: false.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      bodyPush: true,
      breakpoint: '768px' // disable bodyPush on mobile
});

7. Determine whether to allow ESC key to close the drawer. Default: false.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      enableEscapeKey: true
});

8. Customize the close button.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      closeBtn: '<i class="fas fa-times"></i>',
      closeBtnSize: '14px'
});

9. Customize the background overlay when the drawer is opened.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      screenClose: true,
      screenOpacity: '0.5',
      screenZindex: '9998',
      showScreen: true
});

10. Set the distance from the top of the page. Default: 0.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      offsetTop: 0
});

11. Customize the width of the drawer. Default: '350px'.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      width: '300px'
});

12. Config the open/close transitions.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      transition: 'ease',
      transitionDuration: '0.35s',
});

13. Event handlers.

const slideOutPanel = $('#slide-out-panel').SlideOutPanel({
      afterClosed() {},
      afterOpen() {},
      beforeClosed() {},
      beforeOpen() {},
      rendered() {},
});

14. Destroy the drawer.

slideOutPanel.destroy();

Changelog:

2022-01-23

• Updating packages and compiling

---

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