En este consejo rápido, vamos a echar un vistazo a una técnica solo de CSS para crear menús desplegables. Gira en torno al elemento HTML de la casilla de verificación y un uso inteligente de los selectores de CSS sin una sola línea de JavaScript.
Puedes ver el ejemplo en acción en nuestro editor. Haga clic en el botón "Editar" para ver el código. Puede descargar el código fuente completo desde el botón de arriba.
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle">
<label for="checkbox-toggle">Click to Expand</label>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> body{
text-align: center;
font: 16px/1.5 sans-serif;
padding-top: 40px;
background-color: #ECEFF1;
}
.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
}
/**
Hide the checkbox itself. Checking and unchecking
it we will be done via the label element.
*/
input[type=checkbox]{
display: none;
}
/* Click to expand button */
label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 15px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The ul will have display:none by default */
ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
z-index: 1;
margin:0;
padding:0;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
}
ul li{
padding: 15px;
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}
ul li:hover{
background-color: #4FB9A7;
color: #FFF;
}
ul li a{
color: inherit;
text-decoration: none;
}
/**
By using the Following-sibling selector (~),
we can target elements positioned after our checkbox in the DOM tree.
With the state pseudo selector (:checked),
we can make changes depending on the state of the checkbox.
Using this combination of selectors
allows to change the color of the label
and show the list of items
only when the checkbox is checked.
*/
input[type=checkbox]:checked ~ label {
background-color: #3D88BD;
}
input[type=checkbox]:checked ~ ul {
display: block;
}
El marcado
Así es como se ve nuestra estructura HTML. Aquí es importante tener en cuenta que la entrada el elemento tiene que ir primero, antes de la etiqueta y ante el ul . Comprenderá por qué esto es necesario más adelante, cuando revisemos el CSS.
<div class="dropdown">
<input type="checkbox" id="checkbox_toggle">
<label for="checkbox_toggle">Click to Expand</label>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> Como puede ver, no hay nada fuera de lo común aquí, todos los elementos están en HTML estándar y de uso frecuente:
- El div servirá como contenedor para todo.
- La input type=checkbox es necesario debido a su propiedad marcada/no marcada. Estará oculto en todo momento
- La etiqueta se usará para alternar la entrada y también servirá como disparador para su menú desplegable.
- El ul es simplemente una lista que queremos que sea visible cuando se extienda el menú desplegable. Puede ser cualquier otro elemento.
El truco de la casilla de verificación
Solo necesitamos la casilla de verificación elemento para su checked estado, que podemos diseñar usando el :checked Pseudoselector de CSS. La marcación y desmarcación se realiza haciendo clic en la etiqueta, que es una característica básica del navegador. Primero ocultamos la casilla de verificación:
input[type=checkbox]{
display: none;
} También ocultamos la UL de forma predeterminada:es el menú desplegable que solo debería estar visible cuando se extiende el menú desplegable.
ul{
display: none;
}
Y aquí está el truco. Si combinamos el :checked selector con el selector general de hermanos (
input[type=checkbox]:checked ~ ul {
display: block
} El fragmento de CSS anterior mostrará la lista desordenada solo cuando la casilla de verificación esté marcada. Dado que el estado posible de una casilla de entrada de tipo es binario, es perfecto para alternar los elementos entre estado expandido y oculto.
¡Espero que haya disfrutado de nuestro consejo rápido!