jQuery & CSS3 Powered Slide-in Panel Plugin - slidePanel

slidePanel is a jQuery plugin to create simple slide-in panels which allows you to quickly show side content like off-canvas menu, sliding sidebar, etc. Licensed under the GPL v2.

Features:

• CSS3 & RequestAnimationFrame powered animations.
• Mouse drag and drag handle support.
• Touch swipe support.
• Custom postions: top, right, bottom and left.
• Supports both static and dynamic content (AJAX). 
• Content loading spinner.
• Built-in easing effects.
• Programatic API.
• Skinnable.

Basic Usage:

1. Load the required stylesheet file in the head section of the document.

<link rel="stylesheet" href="css/slidePanel.css">

2. Load jQuery library and the jQuery slidePanel plugin at the bottom of the document.

<script src="jquery.js"></script>
<script src="dist/jquery-slidePanel.js"></script>

3. Create a link to display a sliding panel that loads panel content from an external file. You can pass the options to the sliding panel using data-OPTION attributes.

<a href="ajax.html" class="demo" data-direction="top">top</a>
<a href="ajax.html" class="demo" data-direction="left">left</a>
<a href="ajax.html" class="demo" data-direction="right">right</a>
<a href="ajax.html" class="demo" data-direction="bottom">bottom</a>

4. Initialize the plugin and done.

$('.demo').slidePanel();

5. Full plugin options.

// skin1, skin2, null
skin: null,

// CSS classes
classes: {
  base: 'slidePanel',
  show: 'slidePanel-show',
  loading: 'slidePanel-loading',
  content: 'slidePanel-content',
  dragging: 'slidePanel-dragging',
  willClose: 'slidePanel-will-close'
},

// CSS selector for close link
closeSelector: null,

// Custom template
template: function(options) {
  return '<div class="' + options.classes.base + ' ' + options.classes.base + '-' + options.direction + '">' +
      '<div class="' + options.classes.content + '"></div>' +
      '</div>';
},

// Custom loading spinner
loading: {
  appendTo: 'panel', // body, panel
  template: function(options) {
      return '<div class="' + options.classes.loading + '"></div>';
  },
  showCallback: function(options) {
      this.$el.addClass(options.classes.loading + '-show');
  },
  hideCallback: function(options) {
      this.$el.removeClass(options.classes.loading + '-show');
  }
},

// Content filter
contentFilter: function(content) {
  return content;
},

// Animations
useCssTransforms3d: true,
useCssTransforms: true,
useCssTransitions: true,

// Drag options
dragTolerance: 90,
mouseDragHandler: null,
mouseDrag: true,
touchDrag: true,
pointerDrag: true,

// top, bottom, left, right
direction: 'right', 

// Animation speed
duration: '500',

// linear, ease-in, ease-out, ease-in-out
easing: 'ease', 

// callbacks
beforeLoad: $.noop, // Before loading
afterLoad: $.noop, // After loading
beforeShow: $.noop, // Before opening
afterShow: $.noop, // After opening
onChange: $.noop, // On changing
beforeChange: $.noop, // Before changing
beforeHide: $.noop, // Before closing
afterHide: $.noop, // After closing
beforeDrag: $.noop, // Before drag
afterDrag: $.noop // After drag

Change log:

2017-09-11

• v0.3.5

2016-10-17

• v0.3.3

2016-09-02

• fixed

2016-08-31

• ES5 --> ES6

2015-09-22

• add object argument to contentFilter option

2015-08-10

• fix fix selectdrag issue

2015-07-13

• fix fix selectdrag issue

---

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