A Bootstrap sliding side menu with jQuery: 2 demos

The right/left sliding menu in Bootstrap

In this tutorial, the BootSideMenu plug-in is used for creating the sliding menus. The menu panel can be left or right that will close and open as you click the respective arrow.

This may be useful if you have large content that overlaps when the menu is opened, otherwise, whole content will appear.

Have a look at the demos in the following section along with how you may use this sliding menu in your web projects.

A demo of left sliding menu in Bootstrap

In this example, a left menu is created with a few items. The menu will display as web page loads with the first item as active. Click on the arrow to hide the menu and click again on the panel’s arrow to display it:

jQuery sliding menu left

See online demo and code

For setting up this sliding menu, you need to include the plug-in JS file after the jQuery reference:

  <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

<script src=”js/BootSideMenu/BootSideMenu.js”></script>

As this demo is based on Bootstrap framework, so its CSS and JS files are also included in the <head> section.

The plug-in’s CSS file can be referenced from the CDN link here:

  <link rel=”stylesheet” href=”https://cdn.rawgit.com/AndreaLombardo/BootSideMenu/master/css/BootSideMenu.css”>

In the <script> section, you need to initiate the sliding panel with desired options:

 

 <script type="text/javascript">

  $(document).ready(function(){

      $('#sliding-demo').BootSideMenu({side:"left", autoClose:false});

  });

  </script>

 

The code tells the direction of the menu is left with the autoClose option as false. If you keep it true, the menu will be closed as web page loads. See the following example for that.

A demo of right sliding menu with auto close option

In this demo, a right menu is created with the auto-close option a true. As the demo page loads with the right menu, it will hide initially. Click on the arrow to display it and vice versa:

Bootstrap sliding menu right

See online demo and code

The following script is used this time:

  <script type="text/javascript">

  $(document).ready(function(){

      $('#sliding-demo').BootSideMenu({side:"right", autoClose:true});

  });

  </script>

 

So, for specifying the direction, use the “side” option in BootSideMenu method:

side:”right”

Similarly, use the autoClose option as true or false if you want to display the menu or hide it initially.

Author - Abu Hassam

Abu Hassam is an experienced web developer. He graduated in Computer Science in 2000. Started as a software engineer and worked mostly on web-based projects.
Just like any great adventure, web development is about discovery and learning.
The web is a vast playground, and the best adventures are yet to come. Happy coding and exploring! 🌍⌨️