jQuery Navobile

Last year we built and open sourced Navobile, a lightweight jQuery plugin to easily add an off-screen menu to your website. Since then it has been implemented countless times by ourselves and the wider community.

Whilst the docs are are pretty self explanatory for someone confident with jQuery, we have never written a tutorial to guide a novice front end developer.

**The Basics**

Implementing Navobile is simple and requires a slight change to your html – an additional class/id and maybe a . However, it’s worth doing it at the outset of a project rather than as an after thought.

The barebones example in the Github repo demonstrates what is required in terms of HTML, along with the Navobile CSS and JS. Below is a very basic example:

That is essentially it, and all you need to do now is bind Navobile on document ready:

$(document).ready =>
    $('#navigation').navobile()

**Next steps**

Navobile uses CSS transformations to achieve a smooth open/close where possible and if you are already using Modernizr in your project then you won’t need to do any more work to activate them. If you aren’t and you only want a minimal install, the only features Navobile requires are:

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

This helps us keep filesize down as we take advantage of Modernizr and the classes it creates on the html tag.

**Customising via config**

Navobile has a growing list of possible configuration options, a full list of which can be found here but the most commonly changed are:

For example:

$(document).ready =>
    $('#navigation').navobile
      cta: '#my-cta'
      content: '#my-content'
      changeDOM: true
      copyBoundEvents: false

Customising these parameters will suffice for most implementations, but in some advanced cases where you might want to trigger other plugins/events Navobile fires off some events of its own.

**The Events**

All of these are triggered on the document, e.g.

$(document).on 'navobile:open’, =>
     alert 'navobile is opening’ 

**Experimental Features**

When used in conjunction with HammerJS (and the required config), Navobile has access to some experimental features. These features while they do work, they can be temperamental so can’t be deemed release ready.

**The Future of Navobile**

We have a few additional features in the pipeline for Navobile, like:

• Disabling the scrolling of body content when Navobile is open.
• Clicking or tapping the content area to close Navobile.

But we’d also like to know what features you’d like added, so if you have a suggestion that you feel could improve Navobile either create a pull request (we always welcome new contributors) or raise an issue on the Github project page.

About the Author