A repository of over 1000 quality jQuery plugins

jQuery JQuery MobileNav

JQuery MobileNav is a jQuery Responsive & Drawer plugin.

Created by Vejersele

Not what you're looking for? Click here to view more Responsive & Drawer jQuery plugins

jQuery.mobileNav

Build Status

jQuery.mobileNav?

Create an easy to use, responsive navigation for your website.

html

<nav id="primaryNav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Work</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

javascript

$(function () {
  $('#primaryNav').mobileNav();  
});

options

{
  // css classes
  css: {
    triggerClass: "mobileNavTrigger",
    pluginActiveClass: "mobileNavActive",
    isOpenClass: "mobileNavOpen",
    labelClass: "mobileNavLabel",
  },

  // text settings
  text: {
    openText: "Open menu",
    closeText: "Close menu",
    noActiveItemText: "Menu"
  },

  // available callbacks
  callbacks: {
    afterOpen: undefined, 
    afterClose: undefined,
    afterConstruct: undefined,
    afterDestruct: undefined,
  },

  breakpoint: 500, // $(window).width() value
  showLabel: false, // show a label with the active menu item
  activeItemSelector: "ul > li.active > a" // selector to get the active menu item
}

methods

$('#primaryNav').mobileNav('updateLabel'); // updates the label. Can be useful when using ajax ...

$('#primaryNav').mobileNav('open'); // open menu

$('#primaryNav').mobileNav('close'); // close menu


You might also like these other Responsive & Drawer jQuery Plugins

  • hiraku

    “hiraku” means “open” in Japanese. As you can imagine, “offcanvas-menu” is like a drawer and it is of...

  • JqmNavigator

    This is an extension library for jQuery Mobile and Backbone.js frameworks

  • jQuery Easy Nav JS

    A simple, accessible multi-level navigation controller for mobile & desktop