Bootstrap Sidebar Extension With jQuery And CSS / CSS3

A jQuery & CSS extension that creates a CSS3 animated, toggleable off-canvas sidebar for your Bootstrap based webpages. Useful for creating an off-canvas side navigation for your Bootstrap web project.

How to use it:

1. Make sure you first have jQuery library and Twitter's Bootstrap framework installed.

<!-- Bootstrap Core CSS -->
<link href="/path/to/bootstrap.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="/path/to/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/path/to/bootstrap.min.js"></script>

2. Put the style sheet simple-sidebar.css in the head section of your webpage.

<link href="simple-sidebar.css" rel="stylesheet">

3. Create a sidebar navigation as follows:

<div id="sidebar-wrapper">
  <ul class="sidebar-nav nav nav-tabs" id="sidebar-nav">
    <li class="sidebar-brand">
      <a href="#">
        Sidebar With Bootstrap
      </a>
    </li>
    <li class="active">
      <a href="#dashboard">Dashboard</a>
    </li>
    ...
  </ul>
</div>

4. Create a button to toggle the sidebar navigation.

<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>

5. Wrap the sidebar navigation and your main content into a container element.

<div id="wrapper">
  <!-- Sidebar -->
  <!-- Page Content -->
</div>

6. The jQuery script to show/hide the sidebar navigation by toggling CSS classes.

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

---

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