Cómo crear: menú desplegable clicable

Aprende a crear menús desplegables clicables usando CSS y JavaScript.

Crear un menú desplegable clicable

Crear un menú desplegable que aparezca al hacer clic en el botón del usuario.

Paso 1 - Añadir HTML:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Enlace 1</a>
    <a href="#">Enlace 2</a>
    <a href="#">Enlace 3</a>
  </div>
</div>

Ejemplo de explicación:

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

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

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

Segundo paso - Añadir CSS:

/* Botón desplegable */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Botón del menú desplegable al pasar el ratón y al enfocar */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* Contenedor <div> - para elementos necesarios para la ubicación del contenido del menú desplegable */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Contenido del menú desplegable (oculto por defecto) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Enlaces dentro del menú desplegable */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Al pasar el ratón sobre el enlace cambia el color del menú desplegable */
.dropdown-content a:hover {background-color: #ddd;}
/* Mostrar el menú desplegable (cuando el usuario hace clic en el botón del menú desplegable, se agrega esta clase al contenedor .dropdown-content con JS) */
.show {display:block;}

Ejemplo de explicación:

Establecemos estilos como color de fondo, margen interno, efecto de hover para el botón del menú desplegable.

.dropdown clase se usa position:relative，cuando queremos colocar el contenido del menú desplegable justo debajo del botón del menú desplegable (usando position:absolute), es necesario.

.dropdown-content clase contiene el menú desplegable real. Por defecto, está oculto y se mostrará al pasar el ratón (ver a continuación). Tenga en cuenta que el ancho mínimo está establecido en 160px. Puede cambiar este valor según sea necesario. Sugerencia: si desea que el ancho del contenido del menú desplegable sea igual al del botón del menú desplegable, puede establecer el ancho en 100% (y usar overflow:auto para activar el desplazamiento).

No usamos bordes, sino box-shadow propiedad, para que el menú desplegable se vea como una "carta". Además, usamos z-index Coloca el menú desplegable delante de otros elementos.

Tercero - Añade JavaScript:

/* Al hacer clic en el botón, cambia el estado de ocultación y visualización del contenido del menú desplegable */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// Si el usuario hace clic fuera del menú desplegable, cierra el menú desplegable
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Prueba personalmente

páginas relacionadas

Tutoriales:menú desplegable de CSS

Tutoriales:¿Cómo crear un menú desplegable con suspensión?