Advanced Animated Dropdown Menu In Vanilla JavaScript – DropdownEasy

Preview:

Description:

DropdownEasy is a javascript library for creating cool and nice-looking dropdown menus with built-in CSS3 animations, which can be attached to any DOM elements. Similar to tooltips and popovers. Easy to implement without JS/CSS skills.

How to use it:

1. To get started, include the main JavaScript dropdown.js on the page.

<script src="dropdown.js"></script>

2. The HTML structure for the dropdown menu.

<div class="dropdown">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

3. Prevent the dropdown menu from closing on click/tap.

<div class="dropdown dont-dismiss-at-tap">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

4. Display a close button inside the dropdown menu.

<div class="dropdown dont-dismiss-at-tap dismiss-button">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

5. Auto-dismiss the dropdown menu on page scroll.

<div class="dropdown dismiss-while-scrolling">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

6. Trigger the dropdown menu with right-click instead.

<div class="dropdown secondary-click">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

7. Stick the dropdown menu to the screen.

<div class="dropdown fixed-pos">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>

8. Apply a cool animation to the dropdown menu. Available animations:

• scaling
• scaling-bouncy
• scaling-blur
• scaling-fade
• fade
• fade-blur

<div class="dropdown [animationType]@[duration]s-[timing-function]">
  <div class="dropdown-menu">
    <ul>
      <li>Copy</li>
      <li>Paste</li>
      <li>Cut</li>
      <li>Delete</li>
    </ul>
  </div>
</div>