Download
User Rating: 4.2/5 ( 1 votes)
FlexNav - 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).
Features
-
Multiple nested sub menus
-
Tap targets to reveal sub menus for touch screens
-
Hover reveal for desktop
-
Keyboard tab input accessibility
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>
For a single page site with id anchors, add .one-page class to <body>, .menu-button, and FlexNav <ul>:
<ul class="flexnav one-page" data-breakpoint="800"> <li>...</li> </ul>
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 closing body tag and after jQuery
<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>
Initialize
<script>
$(".flexnav").flexNav();
</script>
Options
$(".flexnav").flexNav({
'animationSpeed': 250, // default for drop down animation speed
'transitionOpacity': true, // default for opacity animation
'buttonSelector': '.menu-button', // default menu button class name
'hoverIntent': false, // Change to true for 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?
});
JS Tutorial
