Tiny jQuery Plugin For Mobile Sliding Menu - MobileMenu

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.

How to use it:

1. Include the jQuery library and jQuery mobilemenu plugin's JS and CSS files in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

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

2. Create a navigation bar for your web page using Html unordered list.

<ul class="nav">
  <li><a href="#about">About</a></li>
  <li><a href="#demo">Demo</a></li>
  <li><a href="#download">Download</a></li>
  <li><a href="#documentation">Documentation</a></li>
</ul>

3. Style the navigation in CSS and specify the breakpoint using CSS3 media queries.

.mobilemenu.mobilemenu-theme.js-mobilemenu--opened { background: rgba(0, 0, 0, .5); }

.mobilemenu.mobilemenu-theme,
.mobilemenu.mobilemenu-theme.js-mobilemenu--animate-out { background: rgba(0, 0, 0, 0); }

.mobilemenu--open-icon.mobilemenu-theme {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  cursor: pointer;
  background-color: #eee;
}

.mobilemenu--open-icon.mobilemenu-theme .slicknav_icon {
  display: block;
  padding: 6px;
}

.mobilemenu--open-icon.mobilemenu-theme .slicknav_icon .slicknav_icon-bar {
  display: block;
  height: 5px;
  margin-top: 4px;
  background: #fff;
}

.mobilemenu--open-icon.mobilemenu-theme .slicknav_icon .slicknav_icon-bar.slicknav_icon-bar--first { margin-top: 0; }

.nav { display: none; }

@media (min-width: 620px) {

.mobilemenu--open-icon.mobilemenu-theme { display: none; }

.nav { display: block; }
}

4. Initialize the mobile sliding menu.

$('.nav').mobilemenu({
menuOpenIcon: '<span class="mobilemenu--open-icon mobilemenu-theme"><span class="slicknav_icon"><span class="slicknav_icon-bar slicknav_icon-bar--first"></span><span class="slicknav_icon-bar"></span><span class="slicknav_icon-bar"></span></span></span>',
onInit: function(menu, options){
menu.find('ul').removeClass('nav');
}
});

5. Options available.

• 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

---

This awesome jQuery plugin is developed by sargismarkosyan. For more Advanced Usages, please check the demo page or visit the official website.