Author: | lunev |
---|---|
Views Total: | 2,565 views |
Official Page: | Go to website |
Last Update: | April 1, 2017 |
License: | MIT |
Preview:

Description:
dropdown.js is a really small JavaScript library that appends an easy-to-style dropdown list to any element when clicked.
How to use it:
Import the dropdown.js script into the html page.
<script src="dropdown.js"></script>
Create the dropdown list for a specific element as this:
<div id="sortBox1" class="sort">Sort by <span class="selected"></span> <div class="dropdown"> <ul> <li class="dropdown-active"><strong>Active Item</strong></li> <li><a href="#">More Item</a></li> <li><a href="#">More Item</a></li> ... </ul> </div> </div>
Active the dropdown list.
document.addEventListener('DOMContentLoaded', sortBy('sortBox1'));
Apply your own CSS styles to the dropdown list.
.dropdown { padding: 20px; position: absolute; left: 0; top: 100%; background-color: #333; color: #fff; border-radius: 3px; display: none; opacity: 0; transition: all 1s; line-height: 30px; } .dropdown.open { display: block; } .dropdown.visible { opacity: 1; } .dropdown ul { margin: 0; padding: 0; list-style: none; } .dropdown a { color: #fff; text-decoration: none; } .hide { display: none; }