Off-canvas Push Menu Plugin For Bootstrap - Push.js

Push.js is a lightweight jQuery plugin which adds left or right off-canvas sidebar push menus to your Bootstrap projects.

View more:

• Top 50 Off-canvas Navigation jQuery Plugins

How to use it:

1. Add the push plugin JavaScript to your web project which has jQuery and Bootstrap framework included.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="push.js"></script>

2. Create a left sidebar menu on the webpage.

<nav class="push-sidebar hidden" id="sidebar-left">
  <ul class="nav nav-pills nav-stacked sidebar">
    <li class="nav-header">
      <small>
        Sidebar left
      </small>
    </li>
    <!-- Main links -->
    <li class="active">
      <a href="#">
        Link 1
      </a>
    </li>
    <li>
      <a href="#">
        Link 2
      </a>
    </li>
    <li>
      <a href="#">
        Link 3
      </a>
    </li>
  </ul>
</nav>

3. Create a button to toggle the sidebar menu.

<button type="button" 
        class="btn btn-default pull-left" 
        data-toggle="push" 
        data-target="#sidebar-left" 
        data-distance="250" 
        title="Open left navigation">
  <span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
  <span class="hidden-xs">
    Left Sidebar Menu
  </span>
</button>

4. Add your main content into a container element named '#canvas'. The main content will be pushed to the other side (left or right) when the sidebar menu is opened.

<section class="canvas" id="canvas">
  Main Content Goes Here
</section>

5. All default plugin settings.

// Easing methos, used for the element when it (opens / closes).
easing      : 'cubic-bezier(.2,.7,.5,1)',

// Duration for an element to (open / close)
duration    : 300, 

// Delay before the element (opens / closes)
delay     : 0, 

// Distance an element (opens / closes)
distance    : 250, 

// Enable or disable Anti Scrolling (outside the element)
antiScroll    : true, 

// Enable or disable keyboard closing (escape key to close the element)
keyboard    : true, 

// Enable or disable a modal like overlay (outside the element).
overlay     : true,

// Canvas element (outside togglable sidebars).
canvas      : '#canvas'

6. You're able to pass the settings as shown above via HTML data attributes as these:

<button type="button" 
        class="btn btn-default pull-left" 
        data-toggle="push" 
        data-target="#sidebar-left" 
        data-distance="250" 
        title="Open left navigation">

Change log:

2017-03-01

• Bugfixed

---

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