🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

materialmenu

jQuery plugin that creates an responsive Menu on website.

Try IT!

http://requtize.github.io/materialmenu/

For downloads, see: https://github.com/requtize/materialmenu/releases/

Required

What you need, to work with materialmenu?

  • jQuery 1.9+

License

This code is licensed under MIT License.

How to use?

$(function(){   // Basic usage   $('.material-menu nav > ul').materialmenu();    // Full Usage (with comments)   $(".material-menu nav > ul").materialmenu({     /**      * Define width of the window (in pixels) where starts mobile devices.      * @type integer      */     mobileWidth: 768,     /**      * Width of the wrapper of menu. Works only on mbile.      * @type integer      */     width: 250,     /**      * Time of animation.      * @type integer      */     animationTime: 200,     /**      * Overlay opacity.      * @type integer      */     overlayOpacity: 0.4,     /**      * Class of menu button that fires showing of menu.      * @type string      */     buttonClass: 'material-menu-button',     /**      * If you want, you can define Your own menu button,      * that be appended to generated title.      * @type string      */     buttonHTML: '<div class="material-menu-button"><span></span><span></span><span></span></div>',     /**      * Page title, showed on mobile devices.      * @type string      */     title: '',     /**      * Tells if title can be showed on mobile devices (only).      * @type boolean      */     showTitle: false,     /**      * Number of pixels to scroll top, when title is showed on mobile devices.      * If is 0, title will always be visible on top.      * @type integer      */     titleShowOn: 40,     /**      * If true, menu will hide when user click on some menu item.      * @type boolean      */     hideOnClick: true,     /**      * Fires when menu is opened.      * @param  jQuery object element Menu (ul) object.      * @return void      */     onOpen: function(element) {},     /**      * Fires when menu is closed.      * @param  jQuery object element Menu (ul) object.      * @return void      */     onClose: function(element) {},     /**      * Fires when window width is chenged from desktop to mobile.      * @param  jQuery object element Menu (ul) object.      * @return void      */     onChangeMobile: function(element) {       element.parent().parent().addClass('vertical');     },     /**      * Fires when window width is chenged from mobile to desktop.      * @param  jQuery object element Menu (ul) object.      * @return void      */     onChangeDesktop: function(element) {       element.parent().parent().removeClass('vertical');     },     /**      * Fires when title-bar is opened.      * @param  jQuery object element Title-bar object.      * @return void      */     onShowTitlebar: function(element) {},     /**      * Fires when title-bar is closed.      * @param  jQuery object element Title-bar object.      * @return void      */     onHideTitlebar: function(element) {}   }); });

You May Also Like