A Device-Agnostic Approach to Complex Site Navigation
The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav). This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.
Basic Usage
Start with a simple unordered list, adding in the class and data attributes:
Add the small screen menu button somewhere outside your navigation markup:
Add flexnav.css to the head of your document:
Add jquery.flexnav.min.js before the closing body tag:
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
