https://github.com/rollecode/flexnav-rolle
A jQuery plugin for responsive menus
https://github.com/rollecode/flexnav-rolle
Last synced: 27 days ago
JSON representation
A jQuery plugin for responsive menus
- Host: GitHub
- URL: https://github.com/rollecode/flexnav-rolle
- Owner: rollecode
- License: unlicense
- Created: 2015-03-24T17:42:42.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-03-26T18:09:02.000Z (about 11 years ago)
- Last Synced: 2026-05-02T13:33:30.033Z (28 days ago)
- Language: HTML
- Homepage: http://jasonweaver.name/lab/flexiblenavigation/
- Size: 49.3 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# FlexNav jQuery Plugin
This is was originally a [flexnav](https://github.com/indyplanets/flexnav) fork by Roni Laukkarinen (me), but since the original author has been inactive for a while I decided to detach this as a stand alone repo. Besides, there are so many differences, for instance I use old school jQuery with Gulp instead coffeescript or Grunt.
If Jason and co are activating themselves in flexnav development I will do a lot of pull requests. But for now, this is will remain as my own version of flexnav.
### Extra features over the original
- Made to use with WordPress (`wp_nav_menu`, preferably with `walker`)
- Animations (requires [jquery.easing](https://github.com/gdsmith/jquery.easing), not currently included):
```js
$(".flexnav").flexNav({
'animationOpenSpeed': 500, // default for drop down animation speed on open
'animationCloseSpeed': 500, // default for drop down animation speed on close
'animationOpenEffect': 'swing', // default animation effect on open (requires jquery.easing!)
'animationCloseEffect': 'swing', // default animation effect on close (requires jquery.easing!)
});
```
- Bugfix: `touchend` event for tablets
- Bugfix: funny behavior after window resize due to faulty menu reset
### 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({
'animationOpenSpeed': 500, // default for drop down animation speed on open
'animationCloseSpeed': 500, // default for drop down animation speed on close
'animationOpenEffect': 'swing', // default animation effect on open (requires jquery.easing!)
'animationCloseEffect': 'swing', // default animation effect on close (requires jquery.easing!)
'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
* [Roni Laukkarinen](http://rolle.io)
* [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)