Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
js
 
 
 
 
 
 
 
 
 
 
 
 

README.md

MobileMenu

MobileMenu is a tiny very customizable jquery plugin for turn any block or menu to look-alike on-canvas menus with submenus. You can find demo here.

Installation

Just include the script on your html files.

<script src="path/to/jquery.mobilemenu.min.js" type="text/javascript"></script>
<link href="path/to/jquery.mobilemenu.css" type="text/css" rel="stylesheet" />

Usage

After including the script on your html, write this code somewhere on your javascript file.

$('.menu').mobilemenu();

By default it will add below code before $('.menu') element and copy that element into other block wich will open after click below span element

<span class="mobilemenu--open-icon mobilemenu-theme"></span>

Options

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
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

About

jQuery mobile menu

Resources

License

Packages

No packages published