Minimal Clean Slide In Panel Plugin - jQuery kpopup
| File Size: | 3.91 KB |
|---|---|
| Views Total: | 1034 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
kpopup is a lightweight jQuery plugin to create minimal clean panels sliding out from the edge of the screen to show site navigation, notification messages, discount information or anything you can imagine.
How to use it:
1. To use the plugin, place the JavaScript file kpopup.js after jQuery library.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/kpopup.js"></script>
2. Insert the content that will be displayed in the sliding panel into a hidden container.
<div id="content" style="display: none;"> Sliding Panel Content Here </div>
3. Create an empty element to place the panel.
<div id="myPopup"></div>
4. Create a trigger element to toggle the panel.
<button type="button" id="trigger">Launch</button>
5. Initialize the panel and pass the options to the popup function.
new popup('#myPopup', '#trigger', {
// width
width: '290px',
// height
height: '100%',
// content selector
content: $('#content'),
// duration of animation
duration: 500
})
6. Set the offset of the panel.
new popup('#myPopup', '#trigger', {
// options
}).setTop(px);
new popup('#myPopup', '#trigger', {
// options
}).setRight(px);
new popup('#myPopup', '#trigger', {
// options
}).setBottom(px);
new popup('#myPopup', '#trigger', {
// options
}).setLeft(px);
7. Toggle this panel from different directions.
new popup('#myPopup', '#trigger', {
// options
}).setRight(0).popupTop();
new popup('#myPopup', '#trigger', {
// options
}).popupRight();
new popup('#myPopup', '#trigger', {
// options
}).setRight(0).popupBottom();;
new popup('#myPopup', '#trigger', {
// options
}).popupLeft();
This awesome jQuery plugin is developed by kalvinGit. For more Advanced Usages, please check the demo page or visit the official website.
