@curiousmedia/responsive-nav v1.1.1
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. The mobile menu will also scroll vertically as necessary.
Usage
See /demo/simple
folder for a working demo.
HTML structure
The .responsive-nav-scroll
wrapper is unnecessary if scroll is disabled.
<nav>
<div class="responsive-nav-scroll">
<div>
<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>
</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'), {});
CSS
@import 'src/responsive-nav';
@include responsive-nav-condensed();
Optionally, a pre-compiled CSS document is available: ./dist/responsive-nav.css
.
Options
collapseQuery
Query used to determine if collapsed or expanded menu will be used.
Default: only screen and (min-width: 640px)
classPrefix
Prefix used on all css classes; can be changed to prevent name collision. If this is updated, the responsive-nav-condensed
mixin accepts the same argument.
Default: responsive-nav-
scroll
In condensed (mobile) mode, the menu will scroll vertically as necessary.
Default: true