jQuery plugin that creates an responsive Menu on website.
http://requtize.github.io/materialmenu/
For downloads, see: https://github.com/requtize/materialmenu/releases/
What you need, to work with materialmenu?
- jQuery 1.9+
This code is licensed under MIT License.
$(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) {}
});
});