A Device-Agnostic Approach to Complex Site Navigation
FlexNav is a mobile-first example of using media queries and javascript to make a decent multi-level menu with support for touch, hover reveal, and keyboard tab input accessibility. Special attention is paid to touch screens using tap targets (the key feature of FlexNav).
Note: If you find a bug, please file an issue and note device and browser versions.
Download on GitHub →
Basic Usage
Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>
Add the small screen menu button somewhere outside your navigation markup:<div class="menu-button">Menu</div>
Add flexnav.css to the head of your document:<link href="css/flexnav.css" rel="stylesheet" type="text/css" />
Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav();
you can change the default speed too:$(".flexnav").flexNav({ 'animationSpeed' : 'fast' });
Options
'animationSpeed' : 250, // default drop animation speed
'transitionOpacity': true, // default opacity animation
'buttonSelector': '.menu-button', // default menu button class
'hoverIntent': false, // use with hoverIntent plugin
'hoverIntentTimeout': 150, // hoverIntent default timeout
'calcItemWidths': false, // dynamically calcs top level nav item widths
'hover': true // would you like hover support?
