Slidepanel lets you setup unlimited off-canvas panels.
- Easy to setup
- Only requires jQuery
- Create unlimited off-canvas panels
- 4 Panel Positions (top, right, bottom, left)
- 4 Animation Types
<link rel="stylesheet" href="slidepanel.min.css">
<script src="jquery.js"></script>
<script src="jquery.slidepanel.min.js"></script>
Slidepanel requires the following HTML markup. The name "canvas" inside data-slidepanel is a reserved name and must be given to the container encapsulating your website. You can place all other panels before or after the "canvas", but never inside of it.
<body>
<div data-slidepanel="canvas">
Your website (e.g. header, content, footer, etc.) goes in here.
</div>
<div data-slidepanel="my-panel-name right reveal 400 400">
Your panel goes in here.
</div>
</body>
You can think of the data-slidepanel
as a function that accepts 5 parameters. However, if the panel
your are addressing is the "canvas", data-slidepanel accepts only that single parameter. As pointed
out above, including data-slidepanel is a requirement.
<div data-slidepanel="id position animation open-duration close-duration">
- id: (required) The name of your slidepanel. This can be any name except "canvas" which is exclusively reserved for encapsulating your website as seen in the example above.
- position: (required) This can be either: top, bottom, left or right. You can place multiple panels in the same position.
- animation: (required) Set the animation parameter to either: reveal, slide, overlay or shift.
- open-duration: (optional) This is the animation speed when opening a panel in milliseconds. Defaults to 300.
- close-duration: (optional) This is the animation speed when closing a panel in milliseconds. Defaults open-duration.
Simple initialize Slidepanel via slidepanel.init();
and then, upon your event of choice, call
slidepanel.toggle();
which takes the id of the data-slidepanel
as it's sole parameter.
var slidepanel = window.slidepanel;
jQuery(document).ready(function($) {
slidepanel.init();
$('.my-button').on( 'click', function() {
slidepanel.toggle('my-panel-name');
});
});
- Callback's and event's will be implemented once the plugin has matured.
- Squeeze animation. Squeezes the panel and canvas to show both at the same time.
- Sass variables for bezier animation curves.
- Fixing the bugs.
- Within
slidepanel.init()
the$(window).on( 'resize', _setPanelsCss );
is not working for new canvas size, when panel-width is in percent. - Panels, when switching from x to y position, show content of other panel to early.
- Close and open functions should really only do that. Currently they are both toggle functions.
Slidepanel is a completely rewritten and modified version of: https://www.adchsm.com/slidebars/