🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

FlexNav is a mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events and tap targets. 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.Features:Multiple nested sub menusTap targets to reveal sub menus for touch screensHover reveal for desktopKeyboard tab input accessibilityFallback for no JavaScriptFast clicks for touch screens (no 300ms delay)Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu 

Menus Plugins Responsive

Documentation

FlexNav jQuery Plugin

A Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility


The Details

A mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events and tap targets. 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.

Note: If you find a bug, please file an issue and note device and browser versions. Use the Demo as a point of reference for bugs. I can't offer my time to debug your specific code.

Resources

Features

  • Multiple nested sub menus
  • Tap targets to reveal sub menus for touch screens
  • Hover reveal for desktop
  • Keyboard tab input accessibility
  • Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu
  • Use with hoverIntent jQuery plugin (not included)

Browser Support

  • IE7-10
  • Latest Safari
  • Latest Chrome
  • Latest FireFox
  • Android 2.2 to Latest
  • Mobile Safari

License

FlexNav is unlicensed. Do whatever you want with it. :) Set Your Code Free


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?  	   });

Contributors


Todo

see Todos


Changelog

see Changelog


You May Also Like