jQuery Slidebar.js Plugin - GeeksforGeeks

18 Jan, 2021
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 SlidebarRight SlidebarTop SlidebarBottom Slidebar
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:
jQuery-Plugin
Picked
JQuery
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | ajax() Method
jQuery | removeAttr() with Examples
How to get the value in an input text box using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?