Fullscreen Mobile Hamburger Menu In jQuery - ia-mobilemenu
File Size: | 92 KB |
---|---|
Views Total: | 994 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.