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.
bootstrap-sliding-panel


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 panel 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,  
            remember : true, 
            autoClose: false, // If true the initial status will be "closed"
            pushBody: false, 
            closeOnClick: false 
        });
});
</script>

You can also control sliding menu events by following function

<script>
$(function() {   
$('#menupanel').BootSideMenu({
           onTogglerClick: function() {
             
           },
          onBeforeOpen: function() {
            
          },
          onOpen: function() {
            
          },
onBeforeClose: function() {
  
          },
onClose: function() {
  
          }
        });
});
</script>

See online Demo and Download Source Code.

DEMO | DOWNLOAD

Follow official documentation for more information