Fullscreen Mobile Hamburger Menu In jQuery - ia-mobilemenu

A jQuery mobile-menu plugin that provides a simple way to create a fullscreen hamburger navigation (off-canvas nav) on your cross-device web applications.

How to use it:

1. Load the minified version of the mobile menu plugin after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/mobileMenu.min.js"></script>

2. The required HTML structure for the mobile hamburger menu.

<nav>
  <!-- Hamburger Button -->
  <button data-mobilemenu-trigger=""></button>
  <!-- Menu Wrapper -->
  <div data-mobilemenu-wrapper="open">
    <!-- Menu Header  -->
    <div data-mobilemenu-header>
      <!-- Close Button  -->
      <button data-mobilemenu-trigger></button>
    </div>
    <!-- Menu Content  -->
    <div data-mobilemenu-content>
      <!-- menu content here  -->
    </div>
  </div>
</nav>

3. Create a new instance of the mobile menu.

const menu = new MobileMenu();
menu.init();

4. Open & close the mobile menu programmatically.

// open
menu.open();

// close
menu.close();

5. Reverse the direction of the menu movement.

const menu = new MobileMenu({
      rtl: true
});

6. Callback functions that will be fired on menu open & close.

const menu = new MobileMenu({
      onOpen: null,
      onClose: null,
});

---

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