What is this ?

Apply various animations to your dropdown menus very easily. Animation will be applied to the whole menu, not each item, and on hover.

Installation

npm install --save-dev dropdown_menus_animations

Then...

import { setDefaultStylesToDropdownElements, dropdownAnimateWholeMenu } from 'dropdown_menus_animations';

setDefaultStylesToDropdownElements();
dropdownAnimateWholeMenu();

Requirements

Your html dropdowns should have the following structure :

<div class="dropdownBtn">
    Menu
    <div class="dropdown-container rotateY">
      <a href="" class="list-item-1">Home</a>
      <a href="" class="list-item-2">Contact</a>
      <a href="" class="list-item-3">More</a>
      <a href="" class="list-item-4">Infos</a>
    </div>
  </div>

• a dropdown-button div containing the whole dropdown menu with the class 'dropdown-btn'
• inside of the dropdown-button div, a dropdown-container div with the class 'dropdown-container'
• inside of the dropdown-container div, the dropdown elements

Add the class of your choice between 'rotateY' / 'rotateY' / 'scale' / 'scaleDown' to each dropdown-container, depending on the animation you want to apply to your dropdown. Every dropdown can then have a different animation.