Advanced Animated Dropdown Menu In Vanilla JavaScript – DropdownEasy

Category: Javascript , Menu & Navigation | July 15, 2022
Author:yebece
Views Total:638 views
Official Page:Go to website
Last Update:July 15, 2022
License:MIT

Preview:

Advanced Animated Dropdown Menu In Vanilla JavaScript – DropdownEasy

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>

You Might Be Interested In:


Leave a Reply