Minimal Clean Slide In Panel Plugin - jQuery kpopup

File Size: 3.91 KB
Views Total: 1105
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal Clean Slide In Panel Plugin - jQuery kpopup

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.