Demo

As demo you can check menu of this site on 619 or lower screen size. Or click link below for more detailed demo

Download

You can download it from here.
Or from project github page https://github.com/sargismarkosyan/MobileMenu

Documentation

MobileMenu have some options:

• menu: false menu block, it can be used if you want attach block to an existing menu object
• menuOpenIcon: false menu opener element html code
• menuOpenObject: false element witch mast be clicked for menu opening, if this parameter is set no need for menuOpenIcon
• body: '' menu inner html, by default it will get content of selector element
• onInit: false callback after menu is initialized
• onOpen: false callback after menu opening
• onClose: false callback after menu closing
• onUlInit: false plugin recursively check each ul inside block and do some modifications for it, you can add callback for do some changes
• theme: 'mobilemenu-theme' this class will be attached in menu block and by default menuOpenIcon item

Here is an example

var menu = $('.menu').mobilemenu({
menuOpenIcon: '<span class="mobilemenu--open-icon">Click to open menu</span>',
body: '<p>some body</p>',
onInit: function(menu, options){
  console.log(menu);
  console.log(options);
},
onOpen: function(menu, options){
  console.log(menu);
  console.log(options);
},
onClose: function(menu, options){
  console.log(menu);
  console.log(options);
},
onUlInit: function(ul, index, menu, options){
  console.log(ul);
  console.log(index);
  console.log(menu);
  console.log(options);
}
});

menu.openMenu();

MobileMenu return object with functions:

• menu this is menu object
• menuInner menu inside content object
• openMenu opening menu
• closeMenu closing menu
• updateMenu this will update ul elements, its needs to be called after menuInner modifications