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.

Want a FlexNav for a one page site with anchors to different sections of the page? Check out the single page pattern demo.

Usage

Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>

You can also use em units:<ul class="flexnav" data-breakpoint-em="50"> <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({ 'transitionSpeed' : '0.4s', 'itemHeight': 50 });

devices

Get FlexNav v0.6

Download→

Features

  • Multiple nested sub menus
  • Tap targets to reveal sub menus for touch screens
  • Hover reveal for desktop
  • Keyboard tab input accessibility
  • No js fallback support
  • Supports em units

Browser Support

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