Author: | yebece |
---|---|
Views Total: | 638 views |
Official Page: | Go to website |
Last Update: | July 15, 2022 |
License: | MIT |
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>