Need help with flexnav?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

mrjasonweaver
1.2K Stars 413 Forks The Unlicense 196 Commits 83 Opened issues

Description

A jQuery plugin for responsive menus

Services available

!
?

Need anything else?

Contributors list

# 39,213
CSS
craftcm...
MongoDB
TypeScr...
168 commits
# 384,752
CSS
JavaScr...
2 commits
# 52,066
Algolia
GraphQL
capistr...
Vue.js
1 commit
# 220,207
PHP
HTML
Symfony
silex
1 commit
# 451,975
CSS
JavaScr...
1 commit
# 332,737
CSS
HTML
1 commit

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:

xhtml
  • ...

Add the small screen menu button somewhere outside your navigation markup:

xhtml


For a single page site with id anchors, add

.one-page
class to
, 
.menu-button
, and FlexNav
    :

xhtml
  • ...

Add flexnav.css to the head of your document
xhtml        


Add jquery.flexnav.min.js before closing body tag and after jQuery
xhtml        


Initialize
xhtml

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.