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>