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.
<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"> <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> |
HTML
Create the Html for the side 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 Notebooka> div> <div class="list-group"> <a href="#item-1" class="list-group-item" data-toggle="collapse">Item 1a> <div class="list-group collapse" id="item-1"> <a href="#" class="list-group-item">Item 1 di 1a> <a href="#" class="list-group-item">Item 2 di 1a> <a href="#item-1-1" class="list-group-item" data-toggle="collapse">Item 3 di 1a> <div class="list-group collapse" id="item-1-1"> <a href="#" class="list-group-item">Item 1 di 1.3a> <a href="#" class="list-group-item">Item 2 di 1.3a> <a href="#" class="list-group-item">Item 3 di 1.3a> div> div> <a href="#item-2" class="list-group-item" data-toggle="collapse">Item 2a> <div class="list-group collapse" id="item-2"> <a href="#" class="list-group-item">Item 1 di 2a> <a href="#" class="list-group-item">Item 2 di 2a> <a href="#" class="list-group-item">Item 3 di 2a> div> <a href="#item-3" class="list-group-item" data-toggle="collapse">Item 3a> <div class="list-group collapse" id="item-3"> <a href="#" class="list-group-item">Item 1 di 3a> <a href="#" class="list-group-item">Item 2 di 3a> <a href="#item-3-1" class="list-group-item" data-toggle="collapse">Item 3 di 3a> <div class="list-group collapse" id="item-3-1"> <a href="#" class="list-group-item">Item 1 di 3.3a> <a href="#" class="list-group-item">Item 2 di 3.3a> <a href="#" class="list-group-item">Item 3 di 3.3a> div> div> <a href="#item-4" class="list-group-item" data-toggle="collapse">Item 4a> <div class="list-group collapse" id="item-4"> <a href="#" class="list-group-item">Item 1 di 4a> <a href="#" class="list-group-item">Item 2 di 4a> <a href="#" class="list-group-item">Item 3 di 4a> 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, //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> |
See online Demo and Download Source Code.
Follow official documentation for more information