Create Jquery Bootstrap Sliding Left and Right Menu / Panel

Bootstrap

In this brusque tutorial I am going to make easy Bootstrap and jquery based sliding left and right menu using jquery plugin called BootSideMenu. BootSideMenu is a jQuery plugin to easily construct a sliding menu in a Bootstrap based application. Using this plugin you can easily create sliding left and right panel once toggle feature.

Creating Jquery Bootstrap Sliding Left and Right Menu / Panel

First of each and altogether one tally occurring bootstrap and jquery library regarding page also mount happening 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 create sliding panel actionable you can calculation options to handle menu subsequently 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 choice to BootSideMenu() grow added feature to the front happening considering the money for advice sliding menu panel as per your habit.

<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 furthermore run sliding menu activities by following take effect

<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>

Leave a Reply

Your email address will not be published. Required fields are marked *