jQuery Plugin For Off-canvas Bootstrap Navigation - nb2sb

nb2sb is a jQuery plugin that transform the Bootstrap's collapsed mobile navbar into a sidebar (off-canvas) navigation that slides from the right hand side of your screen when toggled.

How to use it:

1. Include jQuery library and jQuery UI in your Bootstrap project.

<link rel="stylesheet" href="bootstrap.min.css">

<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Include the jQuery nb2sb plugin after jQuery library.

<script src="jquery.nb2sb.js"></script>

3. Create a Bootstrap navbar following the markup structure like so:

<nav id="nb2sb-nav" class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
      
      <!-- icon/button -->
      <button id="nb2sb-btn" type="button" class="navbar-toggle" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    
    <!-- content -->
    <div id="nb2sb-content">
      <ul class="nav navbar-nav nav-pills navbar-right">
        <li class="active"><a data-toggle="pill" href="#">Home</a></li>
        <li><a data-toggle="pill" href="#">Caterogy</a></li>
        <li><a data-toggle="pill" href="#">Blog</a></li>
        <li><a data-toggle="pill" href="#">Contact</a></li>
                <li><a data-toggle="pill" href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>

4. Initialize the plugin.

$( document ).ready(function() {
  $( '#nb2sb-nav' ).nb2sb({
    selectors : {
    opener: '#nb2sb-btn',
    content: '#nb2sb-content',        
    },
    settings: {
      animation: {
        easing: 'easeOutQuint'
      }         
    }
  });
});

5. All default settings.

// select the button or icon. 
selectors: {
  opener: undefined,
  content: undefined,
  closingLinks: undefined
},

// sidebar settings
settings: {

  // data- attribute
  dataName: 'nb2sb',

  // space between the sidebar and the left end of the window/device.
  gap: 64,

  // custom animations
  animation: {
    duration: 500,
    easing: 'swing'
  },

  // custom CSS styles
  style: {
    width: 500,
    padding: '1em',
  }
},

// ajax
 ajax: {}

Change logs:

2015-05-13

• jquery.nb2sb.js

2015-05-12

• added closingLinks in options

---

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