jQuery Slidebar.js Plugin

Last Updated : 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 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> 