jQuery & CSS3 Powered Slide-in Panel Plugin - slidePanel

File Size: 339 KB
Views Total: 19527
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


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


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>' +

// 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:


  • v0.3.5


  • v0.3.3


  • fixed


  • ES5 --> ES6


  • add object argument to contentFilter option


  • fix fix selectdrag issue


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