Tiny jQuery Plugin For Mobile Sliding Menu - MobileMenu

Tiny jQuery Plugin For Mobile Sliding Menu - MobileMenu
File Size: 7.75 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.