Bootstrap Drawer Panel/Navigation Plugin With jQuery

File Size: 106 KB
Views Total: 12129
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Bootstrap Drawer Panel/Navigation Plugin With jQuery

Bootstrap Drawer is a JQuery plugin which adds mobile-friendly, app-style, off-canvas drawer panels/navigation to your Bootstrap project. You will see an off-canvas panel sliding out from the edge of your webpage (or a specific container), and covering the main content when you click on the toggle button.

How to use it:

1. Make sure you have Bootstrap and jQuery installed in your webpage.

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

2. Link to Bootstrap Drawer plugin's JS and CSS files.

<link rel="stylesheet" href="bootstrap-drawer.css">
<script src="drawer.js"></script>

3. Add the CSS class 'has-drawer' to the body tag if you want to create a drawer navigation for the whole webpage.

<body class="has-drawer">

4. The HTML to create a drawer navigation with a toggle link.

<div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
  <div class="drawer-controls">
      <a href="#drawerExample" data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Toggle Menu</a>
  </div>
  <div class="drawer-contents">
      <div class="drawer-heading">
          <h2 class="drawer-title">Menu</h2>
      </div>
      <ul class="drawer-nav">
          <li role="presentation" class="active"><a href="#">Home</a></li>
          <li role="presentation"><a href="#">Profile</a></li>
          <li role="presentation"><a href="#">Messages</a></li>
      </ul>
      <div class="drawer-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.</p>
          <a href="#">A Regular Link</a>
      </div>
      <div class="drawer-footer locked text-center">
          <small>&copy; Caroline Amaba</small>
      </div>
  </div>
</div>

5. Initialize the plugin and make the drawer navigation collapsible on page load.

$('#drawerExample').drawer({ toggle: false });

6. Change the default trigger attribute which can be used to create as many trigger elements as possible.

$('#drawerExample').drawer({ 
  toggle: false,
  trigger: '[data-toggle="drawer"]'
});

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