Drawer

Flexible drawer menu using jQuery, iScroll and CSS.

Download on GitHub

Currently: v3.2.2

Installation

Step 1: Link required files

Download

  1. Drawer v3.2.2
  2. jQuery 1.11.3+   Created by jQuery Foundation and other contributors.
  3. iScroll  Created by Matteo Spinelli.

CDN

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

if you use the Package Managers.

Step 2: Markup

<body class="drawer drawer--left">
  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>
    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>

More example on GitHub Repo

Step 3: Call the Drawer

$(document).ready(function() {
  $('.drawer').drawer();
});

Options

$('.drawer').drawer({
  class: {
    nav: 'drawer-nav',
    toggle: 'drawer-toggle',
    overlay: 'drawer-overlay',
    open: 'drawer-open',
    close: 'drawer-close',
    dropdown: 'drawer-dropdown'
  },
  iscroll: {
    // Configuring the iScroll
    // https://github.com/cubiq/iscroll#configuring-the-iscroll
    mouseWheel: true,
    preventDefault: false
  },
  showOverlay: true
});

Drawer toggle button

<button type="button" class="drawer-toggle">Drawer toggle</button>

Events

Opend

$('.drawer').on('drawer.opened', function(){});

Closed

$('.drawer').on('drawer.closed', function(){});

Methods

Open

$('.drawer').drawer('open');

Close

$('.drawer').drawer('close');

Toggle

$('.drawer').drawer('toggle');

Destroy

$('.drawer').drawer('destroy');

Browsers

Requires a browser that supports CSS3.