Create side (left and right) menu with Jquery Bootstrap

Hi guys, in this post, I'm going to share you how to create side menu with sliding.
so lets start...

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.

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="BootSideMenu.css">
<!-- END CSS -->
 
<!-- JS -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="BootSideMenu.js"></script>
<!-- END JS -->

HTML

Create the Html for the side menu.

<!--left menu -->
<div id="menupanel">
    <div class="user">
        <img src="http://i1.wp.com/www.iamrohit.in/wp-content/uploads/2015/08/rohit.jpg" alt="Esempio" class="img-thumbnail"><br>
        <a href="http://www.iamrohit.in" target="_blank" class="navbar-link">Rohit Kumar <br/> My Public Notebook</a>
    </div>
 
    <div class="list-group">
 
        <a href="#item-1" class="list-group-item" data-toggle="collapse">Item 1</a>
 
        <div class="list-group collapse" id="item-1">
            <a href="#" class="list-group-item">Item 1 di 1</a>
            <a href="#" class="list-group-item">Item 2 di 1</a>
            <a href="#item-1-1" class="list-group-item" data-toggle="collapse">Item 3 di 1</a>
 
            <div class="list-group collapse" id="item-1-1">
                <a href="#" class="list-group-item">Item 1 di 1.3</a>
                <a href="#" class="list-group-item">Item 2 di 1.3</a>
                <a href="#" class="list-group-item">Item 3 di 1.3</a>
            </div>
 
        </div>
 
        <a href="#item-2" class="list-group-item" data-toggle="collapse">Item 2</a>
 
        <div class="list-group collapse" id="item-2">
            <a href="#" class="list-group-item">Item 1 di 2</a>
            <a href="#" class="list-group-item">Item 2 di 2</a>
            <a href="#" class="list-group-item">Item 3 di 2</a>
        </div>
 
        <a href="#item-3" class="list-group-item" data-toggle="collapse">Item 3</a>
 
        <div class="list-group collapse" id="item-3">
            <a href="#" class="list-group-item">Item 1 di 3</a>
            <a href="#" class="list-group-item">Item 2 di 3</a>
            <a href="#item-3-1" class="list-group-item" data-toggle="collapse">Item 3 di 3</a>
 
            <div class="list-group collapse" id="item-3-1">
                <a href="#" class="list-group-item">Item 1 di 3.3</a>
                <a href="#" class="list-group-item">Item 2 di 3.3</a>
                <a href="#" class="list-group-item">Item 3 di 3.3</a>
            </div>
 
        </div>
 
        <a href="#item-4" class="list-group-item" data-toggle="collapse">Item 4</a>
 
        <div class="list-group collapse" id="item-4">
            <a href="#" class="list-group-item">Item 1 di 4</a>
            <a href="#" class="list-group-item">Item 2 di 4</a>
            <a href="#" class="list-group-item">Item 3 di 4</a>
        </div>
 
    </div>
 
</div>

JS

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

Sliding left panel

<script>
$(function() {   
$('#menupanel').BootSideMenu({
            side: "left"
        });
});
</script>

Sliding right panel

<script>
$(function() {   
$('#menupanel').BootSideMenu({
            side: "right"
        });
});
</script>

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

<script>
$(function() {   
$('#menupanel').BootSideMenu({
            side: "right",
            duration: 500,  //Animation duration (milliseconds)
            remember : true, // Restore last menu status on page refresh true/false
            autoClose: false, // If true the initial status will be "closed"
            pushBody: false, // If true the body of the page will be pushed left or right, according to the menu width and position
            closeOnClick: false // If true the menu will be closed when a link is clicked
        });
});
</script>

You can also control sliding menu events by following function

<script>
$(function() {   
$('#menupanel').BootSideMenu({
           onTogglerClick: function() {
             //A function to be executed when the toggler arrow is clicked
           },
          onBeforeOpen: function() {
            // A function to be executed before the menu is opened
          },
          onOpen: function() {
            //A function to be executed when the menu is opened
          },
onBeforeClose: function() {
  //A function to be executed before the menu is closed
          },
onClose: function() {
  //A function to be executed when the menu is closed
          }
        });
});
</script>