jQuery Plugins › jQuery Menu Plugins › Bootstrap Easy Sidebar

Create An Off-canvas Sidebar Navigation with jQuery and Bootstrap

File Size: 6.38 KB
Views Total: 21557
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#side menu#push menu#off canvas menu#Sidebar
Create An Off-canvas Sidebar Navigation with jQuery and Bootstrap

A toucn-enabled, App-style off-canvas sidebar navigation (push menu) for your Bootstrap project on mobile devices, built on top of jQuery, Bootstrap 3 and jQuery detectSwipe plugin.

How to use it:

1. Add the CSS class 'easy-sidebar-active' to your <Html> tag.

<html class="easy-sidebar-active">

2. Load the jQuery library, jQuery detectSwipe plugin and easy-sidebar.css in your Bootstrap project.

<head>
...
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="easy-sidebar.css" rel="stylesheet">
...
</head>

<body>
...
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="detect_swipe/jquery.detect_swipe.js"></script>
...
</body>

3. Add the CSS class 'easy-sidebar' to your Bootstrap navbar component.

<nav class="navbar navbar-inverse easy-sidebar">
  <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
      <a class="navbar-brand" href="#">Brand</a> </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
      <li><a href="#">Link</a></li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#">One more separated link</a></li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form navbar-left" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">Link</a></li>
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- /.container-fluid --> 
</nav>

4. Create a button to toggle the sidebar navigation.

<button class="btn easy-sidebar-toggle">Toggle Sidebar</button>

5. Active the sidebar navigation.

$('.easy-sidebar-toggle').click(function(e) {
  e.preventDefault();
  $('body').toggleClass('toggled');
  $('.navbar.easy-sidebar').removeClass('toggled');
});
$('html').on('swiperight', function(){
  $('body').addClass('toggled');
});
$('html').on('swipeleft', function(){
  $('body').removeClass('toggled');
});

This awesome jQuery plugin is developed by GroundXaero. For more Advanced Usages, please check the demo page or visit the official website.