Cómo buscar o filtrar en menús desplegables

Aprenda a buscar proyectos en menús desplegables utilizando CSS y JavaScript.

Cree un menú desplegable clickeable

Cree un menú desplegable que aparezca al hacer clic en el botón.

Primer paso - Añadir HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Desplegable</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Buscar.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">Acerca de</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contacto</a>
    <a href="#custom">Personalizado</a>
    <a href="#support">Soporte</a>
    <a href="#tools">Herramientas</a>
  </div>
</div>

Ejemplo de explicación:

Puede usar cualquier elemento para abrir el menú desplegable, por ejemplo, un elemento <button>, <a> o <p>.

Cree un menú desplegable utilizando un elemento contenedor (como <div>) y añada en él los enlaces del menú desplegable.

Utilice un elemento <div> para envolver el botón y otro <div> para ubicar correctamente el menú desplegable con CSS.

Segundo paso - Añadir CSS:

/* Menú desplegable botón */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Botón del menú desplegable al pasar el ratón por encima y al hacer clic en él */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Campo de búsqueda */
#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;
}
/* Cuando el cuadro de búsqueda obtiene el foco / se hace clic en él */
#myInput:focus {outline: 3px solid #ddd;}
/* Contenedor <div> - utilizado para posicionar el contenido del menú desplegable */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Contenido del menú desplegable (por defecto está oculto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Enlaces dentro del menú desplegable */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Cambiar el color del enlace del menú desplegable al pasar el ratón por encima */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Mostrar el menú desplegable (cuando el usuario hace clic en el botón del menú desplegable, se usa JS para agregar este clase al contenedor .dropdown-content) */
.show {display:block;}

Ejemplo de explicación:

Hemos diseñado el botón del menú desplegable con estilo, incluyendo el color de fondo, el relleno, los efectos al pasar el ratón, etc.

.dropdown la clase utiliza position:relativeporque queremos que el contenido desplegable esté exactamente debajo del botón del menú desplegable (usando position:absolute implementación).

.dropdown-content la clase contiene el menú desplegable real. Por defecto, está oculto y se muestra al pasar el ratón sobre él (ver a continuación). Nota:min-width está configurado en 230px. Puede modificarlo según sea necesario. Sugerencia: si desea que el ancho del contenido desplegable sea igual al del botón del menú desplegable, puede configurar width Establecido en 100% (y overflow Establecido en auto para habilitar el desplazamiento en pantallas pequeñas).

El cuadro de búsqueda (#myInput) ha sido diseñado con estilo para adaptarse al interior del menú desplegable. Hemos añadido un icono de búsqueda en el lado izquierdo del cuadro de búsqueda, que indica que realmente es un cuadro de búsqueda.

Tercero - Añadir JavaScript:

/* Al hacer clic en el botón, cambia entre ocultar y mostrar el contenido desplegable */
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";
    }
  }
}

Prueba personalmente

Páginas relacionadas

Tutoriales:menú desplegable de CSS

Tutoriales:¿Cómo crear un menú desplegable con悬停?