Author: | ferdiesletering |
---|---|
Views Total: | 1,254 views |
Official Page: | Go to website |
Last Update: | September 4, 2019 |
License: | MIT |
Preview:

Description:
Drawerr.js is a JavaScript library that converts a nested html list into a mobile-friendly, off-canvas, multi-level drawer navigation for your cross-platform webpage.
How to use it:
Create the drawer navigation from nested html lists:
<nav id="drawer" class="drawerr--init"> <ul> <li> <span class="section-title active">Home</span> <ul> <li> <a class="active" href="#">Category 1</a> <ul> <li><a class="active" href="#">Category 1.1</a></li> <li><a href="#">Category 1.2</a></li> </ul> </li> <li><a href="#">Category 2</a></li> </ul> </li> <li> <a href="#">Category 3</a> </li> <li> <a href="#">Category 4</a> <ul> <li><a href="#">Category 4.1</a></li> <li><a href="#">Category 4.2</a></li> <li><a href="#">Category 4.3</a></li> <li><a href="#">Category 4.4</a></li> </ul> </li> <li> <span class="section-title">Category 5</span> <ul> <li><a href="#">Category 5.1</a></li> <li><a href="#">Category 5.2</a> <ul> <li> <a href="#">Category 5.2.1</a> </li> <li> <a href="#">Category 5.2.2</a> <ul> <li><a href="#">Category 5.2.2.1</a></li> <li> <a href="#">Category 5.2.2.2</a> <ul> <li><a href="#">Category 5.2.2.2.1</a></li> <li><a href="#">Category 5.2.2.2.2</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li> <a href="#">Category 5.3</a> </li> </ul> </nav>
Create a button to toggle the drawer navigation.
<button class="toggleDrawer"> <span></span> <span></span> <span></span> </button>
Download and include the Drawerr files on the html page.
<link rel="stylesheet" href="dist/drawerr.css"> <script src="dist/drawerr.js"></script>
Activate the drawer navigation.
const args = { drawerr: '#drawer', toggleBtn: '.toggleDrawer', navbar: 'header' }; new drawerr().init(options);
All possible options.
{ // button text btnText: "MENU", // drawer selector drawerr: "#drawerr", // navbar selection navbar: "header", // toggle btn selector toggleBtn: ".toggleDrawerr", // or right slideFrom: "left", // true of fasle preventBodyOnClick: false }
Perform an action on menu open.
document.addEventListener('drawerr-open', function(){ // do something });
Changelog:
09/04/2019
- 3.0.0-beta.8
09/27/2018
- add option preventBodyOnClick
08/18/2018
- v2.0