A Simple jQuery Plugin for Mobile Menu
Here the steps to configure...
Step 1 : Download and link to the Jquery plugin
Step 2 : Download and link to the Jquery simpleMobileMenu plugin
Step 3 : Fire the jQuery simpleMobileMenu Plugin
$(document).ready(function(){
$(".mobile_menu").simpleMobileMenu()
});- submenuClass
Mobile menu submenu class.This class should be there in each submenu UL's(Default : submenu) - hamburgerId
Mobile menu Hamburger Id.(Default : sm_menu_ham) - wrapperClass
Mobile menu wrapper element class.(Default : sm_menu_outer) - menuStyle
2 Menu Styles : Slide & Accordion.(Default : slide)
- onMenuLoad
Executes immediately after the mobilemenu is fully loaded.Function argument is the current mobile menu element
$(".mobile_menu").simpleMobileMenu({
"onMenuLoad" : function(menu) {
//onload callback
}
})- onMenuToggle
Executes on mobile menu toggle(open/close).Function argument is the current mobile menu state.
$(".mobile_menu").simpleMobileMenu({
"onMenuToggle" : function(menu,open) {
//If opened "open" returns true,otherwise false
}
})<link rel="stylesheet" href="dist/css/jquery.simpleMobileMenu.css" /><script src="dist/js/jquery.simpleMobileMenu.min.js"></script><ul class="mobile_menu">
<li><a href="menu1.com">Menu 1</a></li>
<li>
<a href="menu2.com">Menu 2</a>
<ul class="submenu">
<li><a href="submenu1.com">Sub Menu 1</a></li>
<li>
<a href="submenu2.com">Sub Menu 2</a>
<ul class="submenu">
<li><a href="subsubmenu1.com">Sub Sub Menu 1</a></li>
<li><a href="subsubmenu2.com">Sub Sub Menu 2</a></li>
<li><a href="subsubmenu3.com">Sub Sub Menu 3</a></li>
</ul>
</li>
<li><a href="submenu3.com">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="menu3.com">Menu 3</a></li>
</ul>$(document).ready(function() {
$(".mobile_menu").simpleMobileMenu({
//Hamburger Id
"hamburgerId" : "sm_menu_ham",
//Menu Wrapper Class
"wrapperClass" : "sm_menu_outer",
//Submenu Class
"submenuClass" : "submenu",
//Menu Style
"menuStyle" : "slide",
// Callback - Menu loaded
"onMenuLoad" : function(menu) {
console.log("menu loaded")
console.log(menu)
},
//Callback - menu toggle(open/close)
"onMenuToggle" : function(menu,open) {
console.log(open)
}
});
})