Animated Dropdown Menu With jQuery/Javascript | IA-DROPDOWN

IA-DROPDOWN is a javascript library, powered by jquery, for creating interactive, animated dropdowns. An animated and highly customizable jQuery menu plugin that uses CSS3 transitions for smooth animations and uses a CSS3 transform-origin for transitions.

animated dropdown menu, css dropdown animation examples, css dropdown animation on hover, css dropdown animation on click

How to make use of it:

1. Download the mini version of the dropdown 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="#">Link #1</a>
      <a href="#">Link #2</a>
      <a href="#">Link #3</a>
      <a href="#">Link #4</a>
    </div>

3. Create a toggle button to open/close the drop-down menu.

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

4. Wrap it in a container element with the data wrapper attribute dropdown.

<!-- 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>

5. Initialize the js dropdown plugin.

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 drop-down menu.

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 },
})

Animated Dropdown Menu With jQuery, IA-DROPDOWN Plugin/Github

See Demo And Download

Official Website(issam1994): Click Here

This superior jQuery/javascript plugin is developed by issam1994. For extra Advanced Usages, please go to the official website.