jQuery Based Off-canvas Menu For Bootstrap - Bootstrap Offcanvas

Bootstrap Offcanvas is a jQuery plugin that converts default Bootstrap navbar component into an user-friendly off-canvas side menu in mobile views.

Basic usage:

1. Include Bootstrap's stylesheet and the jQuery Bootstrap Offcanvas plugin's CSS in the head section of your web page.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.offcanvas.min.css">

2. Load the jQuery Bootstrap Offcanvas plugin's script after jQuery JavaScript library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/js/bootstrap.offcanvas.js"></script>

3. Create a button to toggle the off-canvas menu in mobile views.

<button type="button" 
        class="navbar-toggle offcanvas-toggle" 
        data-toggle="offcanvas" 
        data-target="#js-bootstrap-offcanvas" 
        style="float:left;">
  <span class="sr-only">Toggle Button</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

4. Add the corresponding CSS classes to your Bootstrap navigation bar.

<nav class="navbar navbar-default navbar-offcanvas navbar-offcanvas-touch navbar-offcanvas-fade" role="navigation" id="js-bootstrap-offcanvas">
  <div class="container-fluid">
    <div class="navbar-header"> <a class="navbar-brand" href="#">Brand</a>
      <button type="button" class="navbar-toggle offcanvas-toggle pull-right" data-toggle="offcanvas" data-target="#js-bootstrap-offcanvas" style="float:left;"> <span class="sr-only">Toggle navigation</span> <i class="glyphicon glyphicon-remove"></i> </button>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle">Another Link <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><a href="#">Another Link</a></li>
      </ul>
    </div>
  </div>
</nav>

5. Events available.

• show.bs.offcanvas: Fire before the offcanvas menu is shown
• shown.bs.offcanvas: Fire after the offcanvas menu is shown
• hide.bs.offcanvas: Fire before the offcanvas menu is hidden
• hidden.bs.offcanvas: Fire after the offcanvas menu is hidden

6. Toggle event.

// toggle the offcanvas yourself
$("#js-bootstrap-offcanvas").trigger("offcanvas.toggle");

Change logs:

2018-01-06

• v2.5.2: Fixes page not being scrollable after resize

2016-09-01

• v2.4.0

2016-08-12

• Fixed issue with close button state not updating on resize

2016-05-12

• Allows only one dropdown menu to be open

2016-03-28

• Fixed issue with nav height

2016-03-28

• added 'open' event

2015-11-26

• added 'toggle' event

2015-11-17

• v2.0.1

---

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