jQuery Slidebar.js Plugin
JQuery is a small, fast, rich JavaScript Library that is an optimized version of JavaScript. It provides us with a simple API that helps in HTML document traversal and manipulation, event handling, animation, and Ajax. jQuery provide us with a variety of plugins that can be implemented on the website, one of which is Slidebar.js.
Slidebar.js: It is a jQuery Plugin that helps us to create a slidebar along with an animation. It helps in implementing mobile app-style revealing menus and sidebars into our website.
There are four types of slidebars that can be created:
- Left Slidebar
- Right Slidebar
- Top Slidebar
- Bottom Slidebar
In this article, we will be learning about how to implement a left sidebar on our website. But before that, we need to add some CDNs in order to make the slidebar work.
1. Include jQuery CDN
<script src=”https://code.jquery.com/jquery-3.5.1.min.js” type=”text/javascript”></script>
2. Include Slidebar.js CDNs(JS and CSS)
<script src=”https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css”>
Now, we have included all the necessary CDNs, let’s move to the Original Code.
Example:
HTML
<!DOCTYPE html> < html > < head > < title >Slidebar Demo</ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css" > < script src = "https://code.jquery.com/jquery-3.5.1.min.js" type = "text/javascript" > </ script > < script src = "https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js" type = "text/javascript" > </ script > </ head > < body > < div canvas = "container" class = "slidebar-button" > <!-- Creating a heading --> < h2 >Slidebar Demo</ h2 > <!-- Creating a button, clicking on which the left slidebar will open --> < button class = "js-toggle-left" > Left Slide Button </ button > </ div > < div class = "slidebar-content" > < div off-canvas = "left-slidebar left reveal" > < ol > < li >Computer Science</ li >< br > < li >Electronics </ li >< br > < li >IT</ li >< br > </ ol > </ div > </ div > < script > (function ($) { "use strict"; // Creating an instance of Slidebars var controller = new slidebars(); // Initialize Slidebars controller.init(); // left Slidebar controls $('.js-toggle-left').on('click', function (event) { event.stopPropagation(); controller.toggle('left-slidebar'); }); $(controller.events).on('opened', function () { $('[canvas="container"]') .addClass('js-close-any-slidebar'); }); $(controller.events).on('closed', function () { $('[canvas="container"]') .removeClass('js-close-any-slidebar'); }); $('body').on('click', '.js-close-any-slidebar', function (event) { event.stopPropagation(); controller.close(); }); })(jQuery); </ script > </ body > </ html > |
Output:
Before click the Button:
After click the Button: