Fullscreen Mobile Hamburger Menu In jQuery - ia-mobilemenu

File Size: 92 KB
Views Total: 1139
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  <!-- 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>
    <!-- Menu Content  -->
    <div data-mobilemenu-content>
      <!-- menu content here  -->

3. Create a new instance of the mobile menu.

const menu = new MobileMenu();

4. Open & close the mobile menu programmatically.

// open

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