Download .zip Download .tar View on Github
SlideReveal is maintained by nnattawat

SlideReveal

A jQuery plugin to show a side panel by sliding from the left or right of the page.
To see an example, click the download button below or the floating button on the top right.

How to include

Download compressed or uncompressed version of SlideReveal. Then, simply include jquery.js and jquery.slidereveal.min.js you have downloaded.

<script src="http://code.jquery.com/jquery-[latest].min.js">
<script src="jquery.slidereveal.min.js">

Or install using bower

bower install slidereveal

How to use

In your HTML, create a <div> element for the side panel and the triggering element such as <button> or <a>.

<div id='slider'>Hello World!!</div>
<button id='trigger'>Trigger</button>

Then, call the jQuery slideReveal() method in JS.

$('#slider').slideReveal({
  trigger: $("#trigger")
});

Here we go! You can get result as:

Hello World!!

With the default settings

  • Panel slides from the left.
  • It pushes the main content away.
  • You can press ESC to close.
Head's up! The plugin does not add any fancy CSS to your side panel. So, you need to style it yourself to get a nice shadowing panel or a beautiful navigation like in the example from the top right.

Warning!

If you add padding to a side panel and you use Bootstrap, the plugin won't work properly. The hot fix for now is to add the following CSS.

* {
  box-sizing: content-box;
}

Methods

After you execute slideReveal() especially without specifying the trigger option, you can show or hide the side panel programmatically.

HTML code:

<div id='slider'>Hello World!!</div>

JS code:

var slider = $('#slider').slideReveal(); // slideReveal return $('#slider')

// To show the panel
slider.slideReveal("show") // which is equal to $('#slider').slideReveal("show");

// To hide the panel
slider.slideReveal("hide") // which is equal to $('#slider').slideReveal("hide");

// To toggle the panel
slider.slideReveal("toggle") // which is equal to $('#slider').slideReveal("toggle");

If you want to skip the callback functions: show(), shown(), hide() and hidden() mentioned in the next section, you can send false as the second parameter as,

slider.slideReveal("show", false);
slider.slideReveal("hide", false);
slider.slideReveal("toggle", false);

Options

Attribute Type Default Description
width integer || String 250 Width of a side panel. Integer value will be evaluated as px. String value will be assigned directly e.g. '100px', '50%'
push boolean true Whether you want a panel to push the main content. Set it to false results to the menu on the right, for example.
overlay boolean false Whether you want to add the overlay to the main content.
overlayColor String rgba(0,0,0,0.5) Valid css color value.
zIndex integer 1049 z-index of your side panel. In case you use overlay, the overlay's z-index will be set to the given value - 1.
position String left Where you want to show a side panel from. You can only set it to either left or right.
speed integer 300 Animating time for showing a side panel. The unit is millisecond.
trigger jQuery DOM Selection undefined DOM element that you want to use as a trigger to show and hide a panel. If you don't specify, please see the method section.
autoEscape boolean true Whether you want to enable users to use ESC to hide a panel.
top integer 0 Starting position from the top of the window. This option may be useful if you have a fixed topbar, for instance.
show function - Function that you want to trigger before a panel starts revealing. It passes two parameters, jQuery side panel and trigger objects respectively.
shown function - Function that you want to trigger once a panel is fully shown. It passes two parameters, jQuery side panel and trigger objects respectively
hide function - Function that you want to trigger before a panel starts hiding. It passes two parameters, jQuery side panel and trigger objects respectively
hidden function - Function that you want to trigger once a panel is fully hidden. It passes two parameters, jQuery side panel and trigger objects respectively

Examples with options

With the same HTML code:

<div id='slider'>Hello World!!</div>
<button id='trigger'>Trigger</button>

We can change options to create:

Right Panel

$("#slider").slideReveal({
  trigger: $("#trigger"),
  position: "right"
});
Hello World!!
Press ESC to close

Overlay Panel

$("#slider").slideReveal({
  trigger: $("#trigger"),
  push: false,
  overlay: true
});
Hello World!!
Press ESC to close

Wide panel without auto escape

$("#slider").slideReveal({
  trigger: $("#trigger"),
  autoEscape: false,
  width: 500,
  speed: 700
});
Hello World!!

Attach events to a panel

$("#slider").slideReveal({
  trigger: $("#trigger"),
  shown: function(slider, trigger){
    alert("After opened!");
  },
  hidden: function(slider, trigger){
    alert("After closed!");
  },
  show: function(slider, trigger){
    alert("Before open!");
  },
  hide: function(slider, trigger){
    alert("Before close!");
  }
});
Hello World!!