Drawerjs
A navigation drawer for mobile and web applications. It's small, fast, flexible, rich, and no dependencies.
Table of contents
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.jquery.js
│ ├── 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 ;)