This library is powered by JQUERY and it helps you setup a mobile menu quickly and simply.

add the script to your html page after jquery and before your custom script.

      <!-- jquery cdn ... -->
      <script src="/js/ia-mobilemenu.min.js"></script>
      <!-- custom script ...  -->
              

This is the recommended html structure. Please don't forget adding those attributes like in the example, otherwise te script will not be able to work properly.

      
      <!-- open  -->
      <button data-mobilemenu-trigger=""></button>
      <div data-mobilemenu-wrapper="">
        <!-- header  -->
        <div data-mobilemenu-header>
            <!-- close button  -->
            <button data-mobilemenu-trigger></button>
        </div>
        <!-- content  -->
        <div data-mobilemenu-content>
          <!-- menu content here  -->
        </div>
      </div>
      
              

Run the script by creating instances for each dropdown on your page.

      
        const menu = new MobileMenu();
        // attach events
        menu.init();
        // possible manipulations
        // menu.open();
        // menu.close();;
               

The constructor accepts an optional object that can have any of the following options:

            
      {
        onOpen : "a callback function that is called when menu opens. It receives the instance as a parameter",
        onClose :  "a callback function that is called when menu closes. It receives the instance as a parameter",
        rtl = "false by default. pass true if you want to reverse the direction of the menu movement",
      }