https://github.com/mrjasonweaver/flexnav
A jQuery plugin for responsive menus
https://github.com/mrjasonweaver/flexnav
Last synced: 8 days ago
JSON representation
A jQuery plugin for responsive menus
- Host: GitHub
- URL: https://github.com/mrjasonweaver/flexnav
- Owner: mrjasonweaver
- License: unlicense
- Created: 2012-01-18T20:55:06.000Z (over 13 years ago)
- Default Branch: master
- Last Pushed: 2015-10-08T12:11:51.000Z (over 9 years ago)
- Last Synced: 2025-05-10T21:01:43.401Z (14 days ago)
- Language: CSS
- Homepage:
- Size: 50 MB
- Stars: 1,183
- Watchers: 99
- Forks: 388
- Open Issues: 81
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FlexNav jQuery Plugin
### A Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility
* * *
### The Details
* [View Demo](http://jasonweaver.name/lab/flexiblenavigation/)
* [Single page site with fixed navigation demo](http://jasonweaver.name/lab/flexiblenavigation/single-page-pattern.html)
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](https://github.com/indyplanets/flexnav/issues) and note device and browser versions. Use [the Demo](http://jasonweaver.name/lab/flexiblenavigation/) as a point of reference for bugs. I can't offer my time to debug your specific code.
### Resources
* [Theming a Multi-level Responsive Menu in Drupal 7](http://highrockmedia.com/blog/theming-multi-level-responsive-menu-drupal-7)
* [Gratis Drupal 7 Responsive Theme](http://gratis.themehuis.com/)
* [Dreamweaver support forum](http://forums.adobe.com/message/5811244)
* [Using FlexNav with WordPress](http://wordpress.stackexchange.com/questions/101021/using-flexnav-with-wordpress)
* [FlexNav with WordPress Genesis 2.0 demo](http://bradpotter.com/themes/genesis20flex/)
### 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](http://cherne.net/brian/resources/jquery.hoverIntent.html) (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](http://unlicense.org/)
* * *
### 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
$(".flexnav").flexNav();
```
### Options
```js
$(".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
* [Jason Weaver](http://jasonweaver.name) - (Primary)
* [James Sinclair](https://github.com/jrsinclair)
* [Allison Wagner](https://github.com/alliwagner)
* [Sean Breakerfall](https://github.com/breakerfall)
* [Robin Cawser](https://github.com/robcaw)
* [pallandt](https://github.com/pallandt)
* [ac-bristol](https://github.com/ac-bristol)
* * *
### Todo
see [Todos](https://github.com/indyplanets/flexnav/wiki/Todos)
* * *
### Changelog
see [Changelog](https://github.com/indyplanets/flexnav/wiki/Changelog)