Crear una lista desplegable hoverable con CSS.
Demostración: Ejemplos desplegables
Mover el ratón sobre los siguientes ejemplos:
desplegable básico
Crear un cuadro desplegable que aparece cuando el usuario mueve el puntero del ratón sobre un elemento.
Ejemplo
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display:
none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding:
12px 16px;
z-index: 1;
}
.dropdown:hover
.dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span> Mouse over me </span>
<div class="dropdown-content">
<p> Hello World! </p>
</div>
</div> Inténtalo tú mismo " ejemplo Explicación
HTML) Usar cualquier elemento para abrir el contenido desplegable, por ejemplo, un <span> o un <button> elemento.
Utilice un elemento de contenedor (como <div> ) para crear el contenido desplegable y añadir lo que quieras dentro de ella.
Envolver un <div> elemento alrededor de los elementos para posicionar correctamente el contenido desplegable con CSS.
CSS) El .dropdown su uso en clase position:relative , que es necesaria cuando queremos el contenido desplegable para ser colocado justo debajo del botón desplegable (usando position:absolute ).
El .dropdown-content clase contiene el contenido real desplegable. Se oculta por defecto, y se mostrará en vuelo estacionario (véase más adelante). Tenga en cuenta el min-width se establece en 160px. No dude en para cambiar este Consejo:. Si desea que el ancho del contenido desplegable para ser tan amplio como el botón desplegable, establecer el width a 100% (y overflow:auto para permitir desplazamiento en pantallas pequeñas).
En lugar de utilizar una frontera, se ha utilizado el CSS 3 box-shadow propiedad para hacer el menú desplegable se parece a una "tarjeta".
El :hover selector se utiliza para mostrar el menú desplegable cuando el usuario mueve el ratón sobre el botón desplegable.
Menú desplegable
Crear un menú desplegable que permite al usuario elegir una opción de una lista:
Este ejemplo es similar al anterior, excepto que se añade enlaces dentro de la caja desplegable y el estilo que se ajusten a un botón desplegable de estilo:
Ejemplo
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 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: #f9f9f9;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* 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 on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown
button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn"> Dropdown </button>
<div class="dropdown-content">
<a href="#"> Link
1 </a>
<a href="#"> Link 2 </a>
<a href="#"> Link 3 </a>
</div>
</div> Inténtalo tú mismo " alineado a la derecha-contenido desplegable
Si desea que el menú desplegable para ir de derecha a izquierda, en lugar de izquierda a derecha, añadir right: 0;
Más ejemplos
imagen desplegable
Este ejemplo muestra cómo agregar una imagen y otros contenidos dentro de la caja desplegable.
desplegable barra de navegación
En este ejemplo se muestra cómo agregar un menú desplegable en el interior de una barra de navegación.