A Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility
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 click events for 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.
- 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
- Use class
.one-pageon thebody,.menu-button, andul.flexnavfor single page fixed menu - Supports em units
- IE7-10
- Latest Safari
- Latest Chrome
- Latest FireFox
- Android 2.2 to Latest
- Mobile Safari
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>
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>
you can change the default speed too
<script>
$(".flexnav").flexNav({
'animationSpeed' : 'fast' // default
});
</script>
- Make several demo themes
- IE 7/8 large screen bug fixes
- Reverted back to no full responsive support for old IE
- Added full responsive support for IE 7/8 (not tested)
- Added support for em units
- Updated the way FlexNav hides and shows menu. Using a class
.showand css transitions instead of js - Update fixes bug where menu closed when user users scroll on small screens
- Added the ability to have FlexNav on a one page site. Nav links are anchors to single page content. Need to add
.one-pageclass tobody,.menu-button, and FlexNavul. - Updated js to close mobile menu when one-page FlexNav anchor links are clicked/tapped.
- Fixed bug where keyboard accessibility didn't work after mousenter/mouseleave
- Use data attribute on element to set breakpoint instead of plugin option (more flexible if wanting a single column flexnav or two flexnavs on one page)
- Adding support for js mousenter/mouseleave
- Falls back to :hover with no js
- Moved adding .sm/.lg-screen from
bodyto.flexnavelement - Moved adding flexNav-touch/-no-touch from
htmlto.flexnavelement - Removed superfluous classes from markup (
.first-level,.second-level,.sub-menu) - Cleaned up sass/css
- Using class name instead of id for example (
#navchanged to.flexnav)
- Rethinking using js hover events. Reverted back and now issue regarding Click vs. mouse over is reopened
- Added Support for keyboard tab input accessibility. Hat tip alliwagner https://github.com/alliwagner/flexnav/blob/852cd7838aebe635df43d6e8c32e4b9cbf4d74d9/index.html
- Fixed bug where nav doesn't open on hover after clicking drop arrow: Click vs. mouse over
- Added CSS support and markup conditionals for IE7/8
- Added in span elements via js for touch targets on touch screens
- Aded unicode navicon instead of image
- Fixed recursive sub-menu bug that didn't allow users to open/close 3rd/4th level sub-menus on small screens
- Using Sass, Jade and CoffeeScript for preprocessing and compiling
- Started adding class names via js
- Got rid of js that closes menu after click/touch of menu links (caused more trouble than it was worth leaving it in)
- Started support for multi-level sub menus
- Close menu after click/touch of menu links (makes sense for single page navigation with anchors)
- Changed to jQuery Plugin
- No more Modernizr - Uses a simple function to detect touch screens