jQuery Plugin To Create App Look-alike Sliding Sidebars - slideReveal

slideReveal is a jQuery plugin used to creating an off-canvas panel (menu, navigation, sidebar) that slides in and out of the web page when triggered. By default, the sidebar panel slides out from the left of the page and pushes the main content away, similar to the Push Menu as you seen on some mobile Apps.

How to use it:

1. Load the latest version of jQuery library and the jQuery slideReveal plugin on the web page.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="src/slidereveal.js"></script>

2. Create the Html for a sidebar panel that is auto hidden on page loads.

<div id="slider" class="slider">
  ...
</div>

3. Create a button to trigger the sidebar panel.

<button id="trigger">Trigger</button>

4. The Javascript to reveal he sidebar panel as you click on the trigger button.

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

5. All the default settings.

// the width of the panel
width: 250,

// push the main content away
push: true,

// 'left' or 'right'
position: "left",

// Animating time for showing a panel.
speed: 300, 

// Custom tirgger
trigger: undefined,

// Allows to use ESC key to hide a panel.
autoEscape: true,

// callbacks
show: function(){},
shown: function(){},
hidden: function(){},
hide: function(){},

// Starting position from the top of the window.
top: 0

6. Public methods.

// show a sliding panel
$("#slider").slideReveal("show");

// hide the sliding panel
$("#slider").slideReveal("hide");

---

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