El menú de lista desplegable es muy útil para los usuarios cuando visitan cualquier sitio web. Hace una mejor experiencia para el usuario utilizar todo tipo de servicios proporcionados por el sitio web sin problemas. En este artículo, vamos a crear una lista desplegable utilizando HTML , CSS y, lo más importante, JavaScript .
La lista desplegable es básicamente un botón, cuando el usuario hace clic en él, se expande hacia abajo y muestra sus subelementos, desde los cuales los usuarios pueden seleccionar cualquiera de ellos según sus preferencias.
Enfoque: en este artículo, crearemos dos listas desplegables, la primera será una lista desplegable en la que se puede hacer clic, lo que significa que debe hacer clic en ella para ver el resto de los subelementos, y la otra será una lista desplegable lista desplegable, solo tiene que pasar el mouse sobre él y mostrará el resto del subelemento desde el cual el usuario puede seleccionar uno de ellos.
Ejemplo: en esta lista desplegable, el usuario deberá hacer clic en el botón para abrir la lista desplegable.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dropdown list using javascript</title>
<style>
body {
margin: 0;
padding: 0;
background: #333333;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
}
.main {
height: 400px;
padding: 10px;
}
.dropdown_button {
background-color: #0979ad;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 200px;
font-family: montserrat;
border: 1px solid #ffffff;
}
.courses {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.courses li {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style: none;
background-color: rgb(47, 47, 47);
font-family: montserrat;
border: 1px solid white;
}
.courses li a {
text-decoration: none;
color: white;
display: block;
padding: 10px;
}
.courses li:hover {
background-color: #0979ad;
color: white;
}
</style>
</head>
<body>
<div class="main">
<div class="dropdown_list">
<button class="dropdown_button"
onclick="show_list()">
Select course
</button>
<div id="courses_id" class="courses">
<li><a href="">Machine learning</a></li>
<li><a href="">Data science</a></li>
<li><a href="">Data analysis</a></li>
<li><a href="">Data mining</a></li>
<li><a href="">Data warehousing</a></li>
</div>
</div>
</div>
<script>
function show_list() {
var courses = document.getElementById("courses_id");
if (courses.style.display == "block") {
courses.style.display = "none";
} else {
courses.style.display = "block";
}
}
window.onclick = function (event) {
if (!event.target.matches('.dropdown_button')) {
document.getElementById('courses_id')
.style.display = "none";
}
}
</script>
</body>
</html>
Producción:
