Cuadro desplegable minimalista en JavaScript puro-DropDown. js
| Autor: | lunev |
|---|---|
| Views Total: | 2,307 |
| Sitio oficial: | Ir a la web |
| Actualizado: | April 1, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
DropDown. js es una biblioteca de JavaScript muy pequeña que anexa una lista desplegable fácil de estilo a cualquier elemento cuando se hace clic.
Funcionamiento
Importa el script DropDown. js en la página HTML.
<script src="dropdown.js"></script>
Cree la lista desplegable para un elemento específico como esto:
<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 la lista desplegable.
document.addEventListener('DOMContentLoaded', sortBy('sortBox1')); Aplique sus propios estilos CSS a la lista desplegable.
.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; }
