🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

MobileMenu is a lightweight jQuery plugin which turns an ordinary navigation into a mobile App-style sliding menu as the browser window hits a specified breakpoint.

mobile-menu sliding-menu

Documentation

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

You May Also Like