Simple - only menu
$('.material-menu nav > ul').materialmenu();
CSS - Menu Button
.material-menu-button {
display:block;
width:50px;
height:45px;
padding:10px 10px 0px 10px;
background-color:#000;
}
.material-menu-button span {
display:block;
width:100%;
height:5px;
margin-bottom:4px;
background-color:#fff;
}
CSS - Menu in mobile-view
@media only screen and (max-width: 767px) {
.material-menu-wrapper {
padding:20px;
}
.material-menu-view-mobile {
background-color:#fff;
}
}
CSS - Shadow under title-bar
.material-menu-titlebar {
-webkit-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow:0px 2px 3px 0px rgba(0, 0, 0, 0.2);
}
CSS - Shadow on right-side of mobile-menu
.material-menu-view-mobile {
-webkit-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
box-shadow:40px 0px 30px 0px rgba(0, 0, 0, 0.2);
}
Simple - with title-bar (THIS EXAMLPE)
$('.material-menu nav > ul').materialmenu({
/**
* Page title, showed on mobile devices.
* @type string
*/
title: 'My website title',
/**
* Tells if title can be showed on mobile devices (only).
* @type boolean
*/
showTitle: true
});
Advanced - all events (default functionality)
$('.material-menu nav > ul').materialmenu({
onOpen: function(element) {},
onClose: function(element) {},
onChangeMobile: function(element) {
element.parent().parent().addClass('vertical');
},
onChangeDesktop: function(element) {
element.parent().parent().removeClass('vertical');
},
onShowTitlebar: function(element) {},
onHideTitlebar: function(element) {}
});
Advanced - all options (default functionality)
$(".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) {}
});