drawerr v2.0.1
Drawerr
Drawerr is a mobile menu component that's simple and has no dependency on jQuery. It easily slides in with css animations(good for performance) when the hamburger button is clicked. Drawerr supports multi-level navigation so it's not hiding menu items( good for UX ).
Features
- Multilevel support
- Slide direction( left or right )
- CSS animations( good for performance )
- Hamburger included
- Vanilla js, no jQuery
- Overridable sass variables
- browser support
Browser support
Tested on real browsers with BrowserStack.
IE11 and below
Use a service like polyfill.io
Install via yarn & npm
npm install drawerr --save
yarn add drawerr
Usage
Required files
drawerr/
└── dist/
└── drawerr.css
└── drawerr.js
Include CSS file inside the
<link rel="stylesheet" href="dist/drawerr.css">
Include JS file before the closing body tag
<script src="dist/drawerr.js"></script>
Hamburger HTML
<button class="toggleDrawer">
<span></span>
<span></span>
<span></span>
</button>
Drawerr HTML
Basic html is as follows:
<nav id="drawer" class="drawerr--init">
<ul>
<li>
<span class="section-title active">Gezus</span>
<ul>
<li>
<a class="active" href="#">rebum</a>
<ul>
<li><a class="active" href="#">case novum</a></li>
<li><a href="#">iisque</a></li>
</ul>
</li>
<li><a href="#">vix purto</a></li>
</ul>
</li>
<li>
<span class="section-title">quodsi</span>
<ul>
<li><a href="#">nullam</a></li>
<li>
<a href="#">corpora philosophia</a>
<ul>
<li>
<a href="#">mallan</a>
</li>
<li>
<a href="#">rebum</a>
<ul>
<li><a href="#">case novum</a></li>
<li>
<a href="#">iqtario</a>
<ul>
<li><a href="#">faari</a></li>
<li><a href="#">elissee</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<nav>
Drawerr JS
new drawerr().init(args);
Options
drawerr
Drawerr container selector
default: #drawerr
toggleBtn
Btn selector which contains the hamburger
default: .toggleBtn
btnText
Menu text under the hamburger
default MENU
navbar
Navbar selector to determine the offset height for drawerr to slide in
default: header
slideFrom
Direction where drawerr comes from
default:left
Events
Drawerr fires off events when it opens (drawerr-open
) or closes (drawerr-close
) the menu.
document.addEventListener('drawerr-open', function(){
// do something
});
NOTE: the active class should be rendered or set via backend
Plans for the future
- Testing with browserstack
- More options based on the needs
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago