Skip to content

Latest commit

 

History

History
102 lines (85 loc) · 4.01 KB

README.md

File metadata and controls

102 lines (85 loc) · 4.01 KB
Raw

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