https://github.com/madetech/jquery-navobile
A jQuery plugin that makes mobile navigation easy.
https://github.com/madetech/jquery-navobile
jquery navigation
Last synced: about 1 month ago
JSON representation
A jQuery plugin that makes mobile navigation easy.
- Host: GitHub
- URL: https://github.com/madetech/jquery-navobile
- Owner: madetech
- License: bsd-3-clause
- Created: 2013-01-15T09:33:30.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2016-09-19T13:35:00.000Z (over 8 years ago)
- Last Synced: 2025-03-26T06:51:07.852Z (about 2 months ago)
- Topics: jquery, navigation
- Language: JavaScript
- Homepage: https://madetech.github.io/jquery-navobile
- Size: 1.05 MB
- Stars: 154
- Watchers: 62
- Forks: 36
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#jQuery navobile
For full documentation please see the demo page.
[](https://travis-ci.org/madetech/jquery-navobile)
###Demo
[View live demo](http://madetech.github.io/jquery-navobile)
###Usage
`$('#foobar').navobile();`
The css required for the plugin is [here](https://raw.github.com/madetech/jquery-navobile/master/src/jquery.navobile.css) because its always better to control styling in CSS where possible.
###Params
There are a few parameters for the plugin, they are mostly optional.
* cta - the element that will open the navigation on click (default: '#show-navigation')
* content - the selector that wraps the content that will slide out (default: '#content')
* direction - the direction and therefore side that the content slides (default: 'ltr')
* easing - jQuery easing function to use in $.animate fallback (default: 'linear') for more easing options you will require [jQuery.easing](http://gsgd.co.uk/sandbox/jquery/easing/)
* changeDOM - Boolean, whether the plugin needs to move the navigation in the DOM structure (default: false)
* copyBoundEvents - Boolean, if changeDOM is true, whether to or not to copy across any bound events (default: false)
* openOffsetLeft - String, the percentage you want navobile to open (default: '80%') N.B. If you alter this you will also need to change the width of [.navobile-navigation](https://github.com/madebymade/jquery-navobile/blob/master/src/jquery.navobile.css#L40)
* hammerOptions - a Javascript object containing the options detailed here: https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-options. Only needed if you are using bindSwipe/bindDrag (default: {})
###Events
There are a handful of useful events fired by navobile.
* navobile:open - fired when the navigation cta is tapped and navobile is hidden
* navobile:opened - fired when the navobile is fully open
* navobile:close - fired when the navigation cta is tapped and navobile is visible
* navobile:closed - fired when the navobile is fully closed
All of these are triggered on the document, below is a jQuery example:
```
$(document).bind('navobile:open', function() {alert('navobile is opening')});
```
###Credits
Developed and maintained by [Made](http://www.madetech.com?ref=github&repo=navobile).
[](http://www.madetech.com?ref=github&repo=navobile)
Key contributions:
* [Seb Ashton](https://github.com/sebashton)
###License
Licensed under [New BSD License](https://github.com/madetech/jquery-navobile/blob/master/BSD-LICENSE.txt)