Drawerjs

A navigation drawer for mobile and web applications. It's small, fast, flexible, rich, and no dependencies.

Table of contents

  1. Get started
  2. What's includes
  3. Usage
  4. Demo
  5. Limitations
  6. Contributing

Get started

Download the latest release of Drawerjs.

What's includes

On download directories and files, you'll see something like this:

demo/
dist/
├── css/
│   ├── drawerjs.css
│   ├── drawerjs.css.map
│   ├── drawerjs.min.css
│   ├── drawerjs.min.css.map
│   ├── stacked-menu.css
│   ├── stacked-menu.css.map
│   ├── stacked-menu.min.css
│   └── stacked-menu.min.css.map
├── js/
│   ├── amd/
│   ├── commonjs/
│   ├── es6/
│   ├── umd/
│   ├── drawerjs.js
│   ├── drawerjs.js.map
│   ├── drawerjs.min.js
│   ├── drawerjs.min.js.map
│   ├── stacked-menu.js
│   ├── stacked-menu.js.map
│   ├── stacked-menu.min.js
│   └── stacked-menu.min.js.map
├── scss/
│    ├── drawerjs/
│    └── stacked-menu/
docs/
CHANGELOG.md
README.md

Usage

Implementing as easy as posible. Read the API Documentations for details explanations.

Include css file:

<!-- Drawerjs -->
<link href="drawerjs/dist/css/drawerjs.min.css" rel="stylesheet">

Include javascript file:

<!-- Drawerjs -->
<script src="drawerjs/dist/js/drawerjs.min.js"></script>

Basic template

You mush have a wrapper ,#drawerjs and #drawerjs-holder element on your markup. The template will look like this:

Note: it's better to add core drawerjs and holder classes manually.

<main id="wrapper">
  <!-- the Drawer -->
  <aside id="drawerjs" class="drawerjs">
    <!-- your awesome navigations here... -->
    <h1>Drawerjs</h1>
  </aside>
  <!-- the Holder -->
  <section id="drawerjs-holder" class="drawerjs-holder">
    <h2>Site content</h2>
  </section>
</main>

Then called:

var drawer = new Drawerjs();

Demo

Drawerjs demo are included in the download files in the root directory.

Limitations

Drawerjs work well with any CSS framework like Bootstrap and just look awesome on any devices and screen sizes.

Browser support

  • Chrome >= 20
  • Firefox >= 24
  • Edge >= 12
  • Explorer >= 8
  • iOS >= 6
  • Safari >= 6
  • Android 2.3
  • Android >= 4
  • Opera >= 12

Contributing

Thank-you for your interest in Drawerjs, Beni Arisandi.

If you notice any bug(s) or have any idea(s) for new feature(s), skin(s), or something else, please let me know! Send me an email at bent10@stilearning.com or give me your word on comments page, so we can make Drawerjs better together.

If you love this plugin, please give it 5 starts. Thank you ;)