CSS menú desplegable
Usar CSS para crear la pantalla después de un ratón de movimiento en el efecto menú desplegable.
Ejemplos del menú desplegable
Ejemplos Demo 1
este tutorial
www.w3big.com
Ejemplos Demo 2
Los ejemplos de demostración 3
menú básico desplegable
Cuando el ratón se mueve a los elementos especificados, se desplegará a aparecer el menú.
Ejemplos
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-contenidos {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 0px 16px 8px RGBA (0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown: coloque el contenido .dropdown {
display: block;
}
</ Style>
<Div class = "desplegable">
<Span> ratón sobre mí </ span>
<Div class = "desplegable en el contenido ">
<P> Hello World! </ P>
</ Div>
</ Div>
Trate »
Ejemplos de analítica
parte HTML:
Podemos utilizar cualquiera de HTM, los elementos para abrir el menú desplegable, como por ejemplo: <span> o un <button>.
Use elemento contenedor (por ejemplo: <div>) para crear un menú desplegable y colocar en cualquier lugar que desee poner.
Utilice <div> elemento para envolver estos elementos, y el uso de CSS para definir el contenido del estilo desplegable.
parte de CSS:
.dropdown clase utiliza position:relative , que establecerá el contenido del menú desplegable se coloca en el botón desplegable (usando position:absolute ) en la posición de la esquina inferior derecha.
.dropdown-content clase es el menú desplegable real. Está oculto por defecto, aparecerá en el ratón se mueve hacia el elemento especificado después. Tenga en cuenta que min-width valor se establece en 160px. Puede modificar libremente. Nota: Si desea configurar el menú desplegable y el botón de contenido de banda ancha coherente desplegable, establecer el width a 100% ( overflow:auto ajuste puede desplazarse por el pequeño tamaño de la pantalla).
Usamos el box-shadow propiedad permite el menú desplegable que se parece a una "tarjeta".
:hover selector para el menú desplegable de usuario aparecerá cuando el ratón se mueve al botón desplegable.
Menú desplegable
Crear un menú desplegable, y permite al usuario seleccionar un elemento de la lista:
Los anteriores ejemplos de casos similares, cuando se añade un enlace de la lista desplegable, y establecer el estilo:
Ejemplos
/ * Style botón desplegable * /
.dropbtn {
background-color: # 4CAF50;
color: blanco;
padding: 16px;
font-size: 16px;
border: none;
cursor: puntero;
}
/ * Contenedor <div> - que necesita para localizar el contenido desplegables * /
.dropdown {
position: relative;
display: inline-block;
}
/ * Contenido de telecine (oculto por defecto) * /
.dropdown-contenidos {
display: none;
position: absolute;
background-color: # f9f9f9;
min-width: 160px;
box-shadow: 0px 0px 16px 8px RGBA (0,0,0,0.2);
}
/ * Enlace menús desplegables * /
.dropdown contenido a {
color: negro;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/ * Tras el enlace Editar libración color del menú desplegable * /
.dropdown contenido a: hover {background -color: # f1f1f1}
/ * Después de la demostración menú desplegable vuelo estacionario * /
.dropdown: coloque el contenido .dropdown {
display: block;
}
/ * Cuando el contenido de la lista desplegable al lado del botón desplegable muestra el color de fondo modificado * /
.dropdown: hover {.dropbtn
background-color: # 3e8e41;
}
</ Style>
<Div class = "desplegable">
<Botón class = "dropbtn"> menú desplegable </ botón>
<Div class = "desplegable en el contenido ">
<A Href = "#"> Este tutorial 1 </ a>
<A Href = "#"> Este tutorial 2 </ a>
<A Href = "#"> Este tutorial 3 </ a>
</ Div>
</ Div>
Trate »
contenido desplegable de alineación
float: left;
float: right;
Si desea configurar el menú desplegable contenido correcto flotante es de derecha a izquierda en lugar de izquierda a derecha, se puede añadir el siguiente código right: 0;
más ejemplos
Cuadro desplegable
Este ejemplo muestra cómo agregar una imagen de cómo el menú desplegable.
Desplegable de navegación
En este ejemplo se muestra cómo agregar un menú desplegable que aparece en la barra de navegación.