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

sparkaruckus / drawerr Goto Github PK

drawerr's Introduction