Material Menu Demo

---

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,
  /**
   * 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) {}
});