jQuery plugin that creates an responsive Menu on website.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
LICENSE Update LICENSE Nov 2, 2014
README.md
materialmenu.jquery.js
materialmenu.jquery.min.js

README.md

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