Menús desplegables de CSS
Cree un menú desplegable que se pueda desplazar con CSS.
Demostración: ejemplos desplegables
Mueva el mouse sobre los siguientes ejemplos:
Menú desplegable básico
Cree un cuadro desplegable que aparece cuando el usuario mueve el mouse 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>
Ejemplo explicado
HTML) Utilice cualquier elemento para abrir el contenido desplegable, por ejemplo, un elemento <span> o <button>.
Use un elemento contenedor (como <div>) para crear el contenido desplegable y agregue lo que quiera dentro de él.
Envuelva un elemento <div> alrededor de los elementos para colocar el contenido desplegable correctamente con CSS.
CSS) La .dropdownclase usa position:relative, que es necesario cuando queremos que el contenido desplegable se coloque justo debajo del botón desplegable (usando position:absolute).
La .dropdown-contentclase contiene el contenido desplegable real. Está oculto de forma predeterminada y se mostrará al pasar el mouse (ver más abajo). Tenga en cuenta min-widthque está configurado en 160px. 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 widthen 100 % (y overflow:autopara habilitar el desplazamiento en pantallas pequeñas).
En lugar de usar un borde, hemos usado la box-shadowpropiedad CSS para hacer que el menú desplegable parezca una "tarjeta".
El :hoverselector se usa para mostrar el menú desplegable cuando el usuario mueve el mouse sobre el botón desplegable.
Menú desplegable
Cree un menú desplegable que permita al usuario elegir una opción de una lista:
Este ejemplo es similar al anterior, excepto que agregamos enlaces dentro del cuadro desplegable y los diseñamos para que se ajusten a un botón desplegable con 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);
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 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>
Contenido desplegable alineado a la derecha
Si desea que el menú desplegable vaya de derecha a izquierda, en lugar de izquierda a derecha, agregueright: 0;
Ejemplo
.dropdown-content {
right: 0;
}
Más ejemplos
Imagen desplegable
Cómo agregar una imagen y otro contenido dentro del cuadro desplegable.
Pase el cursor sobre la imagen:
Barra de navegación desplegable
Cómo agregar un menú desplegable dentro de una barra de navegación.