jQuery-Simple-MobileMenu

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()
});

Plugin Options

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

Callbacks

• 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
  }
})

Getting started

Include Stylesheet

<link rel="stylesheet" href="dist/css/jquery.simpleMobileMenu.css" />

Include JS

<script src="dist/js/jquery.simpleMobileMenu.min.js"></script>

Setting up HTML

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

Setting up JS

$(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)
      }
   });
})