Get new jQuery plugins just once a week

×

PanelSlider

FavoriteLoadingAdd to favorites

January 14, 2015

PanelSlider | JQuery plugin that slides page to show panels

PanelSlider | A jQuery plugin to show left/right animated panels (sidebar) for navigation.

Created by Eduardo

Download

Example

PanelSlider jQuery plugin

panel

Demo

Side panel slider plugin (jQuery) that also slides page (inspired on medium).

NOTE: Since version 1.0.0 animation and positioning are no longer implemented by the plugin. The animation should be implemented by user's CSS. This enables CSS transform to be used instead of jQuery's animate which significatively boosts performance and makes animations smoother on mobile devices. Checkout *example.html to see a CSS implementation of left and right panels.*

Live demo.

Features

Installation

Include jQuery and jquery.panelslider.min.js scripts:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="jquery.panelslider.min.js"></script>

Bower users can get the source with:

bower install jquery-panelslider

Usage

Opening

Create an element with the panel content and a link to it.

<div id="my-panel">
  <p>Hello, world</p>
</div>

<a id="my-link" href="#my-panel">Open panel</a>

Implement animation using CSS. The CSS below implements a left panel.

/* Panel opening and closing animation lasts 200ms */
body {
  transition: transform .2s;
}

/* Slide page 200px to the right when panel is opened */
body.ps-active {
  transform: translateX(200px);
}

/* Position panel */
#my-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;  /* remember to set 100% height for all its parents too, including html and body */
  background-color: #eee;
  transform: translateX(-200px);
}

and then invoke panelslider() on the element.

$('#my-link').panelslider();

You can also invoke panelslider() directly

$.panelslider($('#my-link'));

Closing

The panel will close when ESC is pressed or any part of the page outside of panel is clicked (if options.clickClose is true).

Alternativaly, it's possible to close it manually. Because there can be only one panel active at a single time, there's no need to select which panel to close:

$.panelslider.close(callback);

Events

The panel triggers few basic events:

$('#my-panel')
  .on('psOpen', function(e) {
    console.log(e.type)
  })
  .on('psClose', function(e) {
    console.log(e.type)
  })
  .on('psBeforeOpen', function(e) {
    console.log(e.type)
  })
  .on('psBeforeClose', function(e) {
    console.log(e.type)
  });

Options

These are the supported options and their default values:

defaults = {
  bodyClass: 'ps-active', // Class to be added to body when panel is opened
  clickClose: true,       // If true closes panel when clicking outside it
  onOpen: null            // Callback after the panel opens
}

A call with no arguments is equivalent to:

$('#my-link').panelslider({bodyClass: 'ps-active', clickClose: true, onOpen: null});
PanelSlider

Related posts:

Easy Paginate
MeanMenu
SooperFish

To install using Bower
bower install jquery-panelslider

PanelSlider jQuery plugin

http://jquer.in/wp-content/uploads/2015/01/PanelSlider.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever