Animated Dropdown Menu With jQuery - IA Dropdown

An animated and highly customizable jQuery dropdown menu plugin that uses CSS3 transitions for smooth animations and utilizes CSS3 transform-origin for transformations.

How to use it:

1. Load the minified version of the dropdownjs plugin.

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

2. Create a menu list as follows:

<div data-dropdown-menu>
  <a href="https://www.jqueryscript.net">jQueryScript.Net</a>
  <a href="https://www.cssscript.com">CSSScript.Com</a>
  <a href="https://www.vuecript.com">VueScript.Com</a>
  ...
</div>

3. Create a toggle button to open/close the dropdown menu:

<button data-dropdown-trigger>
  Websites:
</button>

4. Wrap them into a container element with the data-dropdown-wrapper attribute. The full HTML structure should look as follows:

<div data-dropdown-wrapper>
  <button data-dropdown-trigger>
    Websites:
  </button>
  <div data-dropdown-menu>
    <a href="https://www.jqueryscript.net">jQueryScript.Net</a>
    <a href="https://www.cssscript.com">CSSScript.Com</a>
    <a href="https://www.vuecript.com">VueScript.Com</a>
    ...
  </div>
</div>

5. Initialize the dropdownjs plugin and done.

function handleDropdowns() {
  const dropdowns = $("[data-dropdown-wrapper]").each(function (
    index,
    wrapper
  ) {
    const dropdown = new Dropdown({ 
      wrapper, 
      // more options here
    }).init();
  });
}
$(function () {
  handleDropdowns();
});

6. Full plugin options to customize the dropdown menu.

• wrapper: DOM element that contains the trigger and the menu, required
• transformOrigin: CSS transform-origin property, pass false to disable
• transition: CSS transition property, pass false to disable
• onClose: onClose callback
• onOpen: onOpen callback
• visibleCss: visible CSS styles
• hiddenCss: hidden CSS styles

const dropdown = new Dropdown({ 
      wrapper, 
      transformOrigin: "top",
      transition: "all .15s ease-in-out",
      onClose: (instance) => null,
      onOpen: (instance) => null,
      visibleCss: { transform: "scale(1)", opacity: 1 },
      hiddenCss: { transform: "scale(0)", opacity: 0 },
})

---

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