Minimalist Dropdown Box In Pure JavaScript – dropdown.js

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; }