Cómo - Desplegable Buscar/Filtrar
Aprenda a buscar elementos en un menú desplegable con CSS y JavaScript.
Menú desplegable de filtro
Crear un menú desplegable en el que se pueda hacer clic
Cree un menú desplegable que aparece cuando el usuario hace clic en un botón.
Paso 1) Agregar HTML:
Ejemplo
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input
type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
Ejemplo explicado
Utilice cualquier elemento para abrir el menú desplegable, por ejemplo, un elemento <button>, <a> o <p>.
Use un elemento contenedor (como <div>) para crear el menú desplegable y agregue los enlaces desplegables dentro de él.
Envuelva un elemento <div> alrededor del botón y el <div> para posicionar el menú desplegable correctamente con CSS.
Paso 2) Agregar CSS:
Ejemplo
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#myInput {
box-sizing: border-box;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border:
none;
border-bottom: 1px solid #ddd;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Ejemplo explicado
Hemos diseñado el botón desplegable con un color de fondo, relleno, efecto de desplazamiento, etc.
La .dropdown
clase usa position:relative
, que es necesaria cuando queremos que el contenido desplegable se coloque justo debajo del botón desplegable (usando position:absolute
).
La .dropdown-content
clase contiene el menú desplegable real. Está oculto de forma predeterminada y se mostrará al pasar el mouse (ver más abajo). Tenga en cuenta min-width
que está configurado en 230px. Siéntete libre de cambiar esto. Sugerencia: si desea que el ancho del contenido desplegable sea tan ancho como el botón desplegable, establezca el valor width
en 100 % (y overflow:auto
para habilitar el desplazamiento en pantallas pequeñas).
El campo de búsqueda (#myInput) está diseñado para encajar dentro del menú desplegable. Hemos agregado un icono de búsqueda, que se coloca a la izquierda dentro del campo de búsqueda para indicar que en realidad se trata de un campo de búsqueda.
Paso 3) Agregar JavaScript:
Ejemplo
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter =
input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
}
Sugerencia: vaya a nuestro tutorial de menús desplegables de CSS para obtener más información sobre los menús desplegables.
Sugerencia: vaya a nuestros menús desplegables que se pueden desplazar para obtener más información sobre los menús desplegables que se pueden desplazar