@curiousmedia/responsive-nav

Responsive Nav

Responsive navigation for desktop and mobile devices. On larger devices, menu is expanded and fully visible. On smaller devices, menu is collapsed and can be toggled open and closed.

Usage

See /demo folder for a working demo.

HTML structure

The .scroll wrapper is unnecessary if menu scrolling is disabled.

<nav>
    <div class="scroll">
        <ul>
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
        <a href="#" class="close">Close</a>
    </div>
</nav>
 
<a href="#" class="toggle">Menu toggle</a>
<script src="responsive-nav.js"></script>

Javascript

The ResponsiveNav class accepts two arguments: a DOM element containing the menu (required) and a config object (optional).

//Config
var config = {
    scrollElement: document.querySelector('nav .scroll')
 }

//Responsive Nav class
var menu = new ResponsiveNav(document.querySelector('nav'), config);
//Menu toggle
document.querySelector('.toggle').addEventListener('click', () => {
    menu.toggle()
});
//Close menu
document.querySelector('.close').addEventListener('click', () => {
    menu.close();
});

CSS

@import 'responsive-nav';
.toggle, .close {
    display: none;
}
 
nav {
    @include responsive-nav-expanded();
    @include responsive-nav-condensed();
    @media only screen and (max-width: 640px) {
        @at-root .toggle {
            display: block;
        }
        
        .close {
            display: block;
        }
    }
}

Options

collapseQuery

Query used to determine if collapsed or expanded menu will be used.

Default: only screen and (min-width: 640px)

disableDocumentScroll

When menu is opened in collapsed mode, the website body will not be scrollable.

Default: true

scrollElement

If a DOM element is passed, the collapsed menu will be scrollable as necessary. disableDocumentScroll and scrollElement may be used together.

Default: false

scroll

Responsive nav uses IScroll library to handle scrolling in collapsed menu. IScroll configuration can be customized by defining this object. See IScroll documentation for configuration details.

Default: {bounce: true, mouseWheel: true, scrollX: false, scrollY: true, click: true, disablePointer: true, disableTouch: false, disableMouse: false}