This library is powered by JQUERY and it helps you setup dropdowns quickly and simply.

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

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

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

  <!-- wrapper  -->
  <div data-dropdown-wrapper>
  <!-- trigger  -->
    <button data-dropdown-trigger>Options</button>
  <!-- menu  -->
    <div data-dropdown-menu>
      <a href="#">Link #1</a>
      <a href="#">Link #2</a>
      <a href="#">Link #3</a>
      <a href="#">Link #4</a>
    </div>
  </div>
          

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

  const dropdowns = $("[data-dropdown-wrapper]").each(function (index, wrapper) {
      const dropdown = new Dropdown({ wrapper, transformOrigin: false }).init();
  });
           

the Dropdown object constructor expects an object that has the following keys:

        
  {
    // required
    wrapper : "DOM element. The container that containes the trigger its menu"
    // optional
    transformOrigin : "the css value of transform-origin, by default it's set to 'top', pass false to disable"
    transition : "the css value of transition, by default it's set to 'all .15s ease-in-out', pass false to disable",
    visibleCss = "by default it's { transform: "scale(1)", opacity: 1 }",
    hiddenCss = "by default it's { transform: "scale(0)", opacity: 0 }",
    onClose : "callback after close"
    onOpen : "callback after open"
  }