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