FlexNav : jQuery Plugin for Responsive Menus

FlexNav : jQuery Plugin for Responsive Menus

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 menus
  • Tap targets to reveal sub menus for touch screens
  • Hover reveal for desktop
  • Keyboard tab input accessibility
  • Fallback for no JavaScript
  • Fast clicks for touch screens (no 300ms delay)
  • Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu

 

Leave a Reply