jQuery Sliding Side Menu/Panel with Bootstrap - BootSideMenu.js

jQuery Sliding Side Menu/Panel with Bootstrap
jQuery Sliding Side Menu/Panel with Bootstrap

A simple lightweight jQuery plugin used to create Sliding Side Menu/Panel that smoothly slide out from the edge of your screen when toggled, built with JavaScript and Bootstrap 3.

How to use it:

1. Load the Bootstrap's stylesheet and BootSideMenu.css in the head section of the web page.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/css/BootSideMenu.css">

2. Load the jQuery library, Bootstrap's script and BootSideMenu.js at the bottom of the web page.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.min.js"></script>
<script src="js/BootSideMenu.js"></script>

3. Create the Html for the side menu.

<!--Test -->
<div id="test">
  <div class="user">
      <img src="../img/avatar.png" alt="Esempio" class="img-thumbnail"><br>
      <a href="http://www.lombardoandrea.com" target="_blank" class="navbar-link">Andrea Lombardo</a>

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


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

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


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


<!--/Test -->

4. Call the plugin on the parent element and set the option to create a side menu that will slide out from the left hand side of your screen.


5. Default options.


  // 'left' or 'right'
  side: "left",

  // animation speed
  duration: 500,

  // restore last menu status on page refresh
  remember: true,

  // auto close
  autoClose: false,

  // push the whole page
  pushBody: true,

  // close on click
  closeOnClick: true,

  // width
  width: "15%",

  // icons
  icons: {
    left: 'glyphicon glyphicon-chevron-left',
    right: 'glyphicon glyphicon-chevron-right',
    down: 'glyphicon glyphicon-chevron-down'

  // 'dracula', 'darkblue', 'zenburn', 'pinklady', 'somebook'
  theme: '',

6. Callback functions.


  onTogglerClick: function () {
      //code to be executed when the toggler arrow was clicked
  onBeforeOpen: function () {
      //code to be executed before menu open
  onBeforeClose: function () {
      //code to be executed before menu close
  onOpen: function () {
      //code to be executed after menu open
  onClose: function () {
      //code to be executed after menu close
  onStartup: function () {
      //code to be executed when the plugin is called

7. API methods.

// open

// close

// toggle

Live Demo

See the Pen jQuery Sliding Side Menu/Panel with Bootstrap - BootSideMenu by Plugin JS (@pluginjs) on CodePen.

File Info

File Name :
Size :
Site Download :
Official Website:
Go to website
Previous Post Next Post