This time I will share jQuery Plugin and tutorial about Generic Sliding Panel In jQuery – SlidePanel.js, hope it will help you in programming stack.
A lightweight yet versatile jQuery plugin used to create customizable sliding panels for site navigation on mobile, settings panes on dashboard, notification bars, feedback forms, social sharing widgets, and much more.
Features:
- Slides out from top, bottom, left, or right of the page.
- Configurable animations.
- Auto closes the sliding panel when clicking a link inside it.
- Push the body content to the other side similar to off-canvas push menu.
- Prevents page scroll when the sliding panel is activated.
- Useful callback functions.
How to use it:
1. Place the minified version of the SlidePanel.js plugin after loading jQuery.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/src/SlidePanel.min.js"></script> |
2. Add your content (like menu items) to the sliding panel.
1 |
<section id="example" class="myPanel"> |
2 |
... Any Content Here ... |
3. Initialize the plugin on the top container.
1 |
var instance = $('.myPanel').SlidePanel({ |
4. Activate the sliding panel.
5. Apply CSS styles to the sliding panel.
03 |
background-color: #fff; |
04 |
overflow: hidden !important; |
06 |
box-shadow: 8px 0 8px -10px #000000,-8px 0 8px -10px #000000; |
17 |
flex-direction: column; |
6. Display a background overlay when the sliding panel is activated.
1 |
<div class="overlay"></div> |
1 |
var instance = $('.myPanel').SlidePanel({ |
2 |
onSlideOpening: function () { |
3 |
$(".overlay").removeClass("is-hidden").addClass("is-visible"); |
4 |
}, onSlideClosing: function () { |
5 |
$(".overlay").removeClass("is-visible").addClass("is-hidden"); |
08 |
background-color: rgba(34,32,32,.7); |
7. Insert a close button into the sliding panel.
1 |
<button class="slider-exit"> |
1 |
var instance = $('.myPanel').SlidePanel({ |
2 |
exit_selector: ".slider-exit" |
8. Create a trigger button to launch the sliding panel.
1 |
<button id="sliderpanel-toggle"> |
1 |
var instance = $('.myPanel').SlidePanel({ |
2 |
toggle: "#sliderpanel-toggle" |
9. Determine the placement of the sliding panel: top, right (default), bottom, left.
1 |
var instance = $('.myPanel').SlidePanel({ |
10. More configuration options with default values.
01 |
var instance = $('.myPanel').SlidePanel({ |
04 |
animation_duration: "0.5s", |
05 |
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)", |
