Skip to content

Latest commit

 

History

History
67 lines (47 loc) · 1.33 KB

README.md

File metadata and controls

67 lines (47 loc) · 1.33 KB
Raw

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.