jQuery Navobile

Usage

JavaScript

Default usage for Navobile is as easy as this (where #navigation is your navigation menu):

$('#navigation').navobile();

CSS

Navobile uses CSS to apply CSS3 translations, Mobile device detection and fixing the position of nav. In the CSS file we used for this demo and the one that is included in the src folder the mobile break point is at 765px using a media query, you can of course change this to suit your needs.

Changing the timing function used by the transform alter Navobile's css. The available timing functions available are listed on MDN although we don't recommend any of the step timing functions. If you want something really bespoke you could use Lea Vearou's Cubic bezier tool

Options

Navobile has a few options to customise.

• 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, is either 'rtl' or 'ltr' (default: 'ltr')
• easing - jQuery easing for the fallback $.animate function (default: 'linear') for more easing options you will require 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 or not to copy any bound events (default: false)
• bindSwipe - Boolean, whether to open/close nav using swipe. HammerJS required for this to work. default: false
• bindDrag - Boolean, whether to open/close nav using drag. HammerJS required for this to work. Experimental feature. default: false
• openOffetLeft - String, a percentage as a string that determines the total left offset when navobile is open. default: '80%'. N.B. Please note it you alter this you'll also want to change the width of .navobile-navigation.
• hammerOptions - a Javascript object containing the options detailed here: https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-options. default: {}

Any changes to the defaults should be passed in at init

$('#foobar').navobile({
    'cta': '#foo-cta',
    'easing': 'easeQuintOut'
});

Events

Navobile has a few events that you can bind to.

• 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')
});

Dependencies

Navobile has a couple of dependencies to make full use of its features and get the very best performance possible.

These dependencies are:

• Modernizer
• Hammer JS and its plugin for jQuery

HammerJS is only required for the swipe and experimental drag features.

The versions of the above that were used in development are included in the lib folder of the project. Version 0.2 of Navobile was built with v1.0.5 of HammerJS. Earlier versions (versions > v0.2) are recommended to use the version of HammerJS in the v0.1.4 tag as it contains a bug fix.

We include all of Modernizer's features and the non-core css-overflow-scrolling by default. If you however have a desire to have a barebones install you need to have the following features detected to take full advantage of navobile.

• Core

  • CSS 2D Transform
  • CSS 3D Transform
  • Touch Events

• Non-Core

  • css-overflow-scrolling

Change Log

v0.3.0

• New Option - direction, a string variable. Which direction to slide the content

v0.2.6

• New Param - copyBoundEvents, a boolean variable. Whether or not to copy DOM events

v0.2.5

• Events - Open, Close, Opened and Closed all join the party

v0.2.3

• New Param - openOffetLeft, a percentage as a String to allow more control over the amount the navigation opens

v0.2.1

• Fixed scroll issue on Android 2.3.x - helpfully Google thought not to support overflow hidden until v3
• New Version of modernizr
• Ability to pass options into HammerJS

v0.2

• Latest version of HammerJS (v1.0.5)
• Removes dependancy on HammerJS for basic functionality
• Swipe open/close is now stable
• General housekeeping

v0.1

• Initial Release