Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Transform your main navigation into a select object for mobile browsers
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
js
README.md
index.html

README.md

jQuery Mobile navigation

Transform your main navigation into a select object for mobile browsers.

Demo

http://www.celavi.fr/github/Mobile-Navigation

JQuery

Download jquery.mobileNav.js (required jQuery)


$(document).ready(function(){
  
  $('.menu').mobileNav();
  
});

You can also change the default Parameters


$(document).ready(function(){

  $('.menu').mobileNav({
    classNav: 'mobile-nav', // class of the select navigation
    idNav: 'mobile-nav', // id of the select navigation
    container: $('.header nav'), // element wrapping the select navigation
    label: 'Navigation', // text value on first option select nav
  });

});

CSS

Of course you can change the CSS for your consideration


    .mobile-nav {
      display: none; /* hide the select nav by default */
    }
    
    @media only screen and (max-width: 781px) {
      .menu {display: none;} /* hide the main navigation */
      .mobile-nav {display: block; min-width: 460px;} /* show the select navigation */
    }
    
    @media only screen and (max-width: 481px) {
      .mobile-nav {min-width: 320px;} /* change width for smaller screen */
    }

Author

Vincent Bianciotto www.celavi.fr

Copyright and licence

Dual licensed under MIT and GPL.

Something went wrong with that request. Please try again.