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.
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
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:
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;
}
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);
| 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 |
With the same HTML code:
<div id='slider'>Hello World!!</div> <button id='trigger'>Trigger</button>
We can change options to create:
$("#slider").slideReveal({
trigger: $("#trigger"),
position: "right"
});
$("#slider").slideReveal({
trigger: $("#trigger"),
push: false,
overlay: true
});
$("#slider").slideReveal({
trigger: $("#trigger"),
autoEscape: false,
width: 500,
speed: 700
});
$("#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!");
}
});