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)
• menuContainer
  Custom container selector where the hamburger and menu wrapper will be appended. If not specified or if the selector doesn't match any element, the menu will be appended to the body.(Default : null)

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",
    //Menu Container (optional) - selector for custom container
    "menuContainer" : null, // e.g., "#header" or ".nav-container"
    // 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)
      }
   });
})