Create Jquery Bootstrap Sliding Left and Right Menu / Panel

In this quick tutorial I am going to create simple bootstrap and jquery based sliding left and right menu using jquery plugin called BootSideMenu. BootSideMenu is a jQuery plugin to easily build a sliding menu in a Bootstrap based application. Using this plugin you can easily create sliding left and right panel with toggle feature.

Creating Jquery Bootstrap Sliding Left and Right Menu / Panel

First of all include bootstrap and jquery library on page after that add BootSideMenu css and js file.

HTML

Create the Html for the side menu.

    

        

        Rohit Kumar 
 My Public Notebook
    

    


        Item 1

        

            Item 1 di 1
            Item 2 di 1
            Item 3 di 1

            

                Item 1 di 1.3
                Item 2 di 1.3
                Item 3 di 1.3
            

        

        Item 2

        

            Item 1 di 2
            Item 2 di 2
            Item 3 di 2
        

        Item 3

        

            Item 1 di 3
            Item 2 di 3
            Item 3 di 3

            

                Item 1 di 3.3
                Item 2 di 3.3
                Item 3 di 3.3
            

        

        Item 4

        

            Item 1 di 4
            Item 2 di 4
            Item 3 di 4
        

    

JS

Finally call BootSideMenu() to make sliding panel actionable you can pass options to handle menu like left and right sliding.
Sliding left panel

Sliding right panel

You can pass more option to BootSideMenu() add extra feature to control sliding menu panel as per your need.

You can also control sliding menu events by following function

See online Demo and Download Source Code.

DEMO | DOWNLOAD

Follow official documentation for more information