Bloque dinámico desplegable: details
Un menu desplegable solo con HTML
Una de las últimas adiciones a HTML es el bloque details - summary, un bloque con comportamiento dinámico que no necesita que definamos ningún estilo o que programemos un evento con Javascript. Bata código HTML para plegar o desplegar el conentido de este tipo de bloques
No tiene animaciones, pero es muy sencillo de crear. Si quieres algo más sofisticado puedes usar CSS como en los ejemplos de la sección como se hace, donde puedes encontrar un desplegalbe tipo accordion o con grids
Estilos CSS
El lenguaje usado para controlar el aspecto como se ve de la página webPulsa sobre Estilos CSS¿Ves lo que ha ocurrido? Nada sorprendente pero si te digo que no hay nada de CSS ni de Javascript, este comportamiento llama la atención. Solo necesitas CSS para darle el aspecto que más te convenga.
El uso de este bloque es muy simple:
Details: contiene la parte oculta. Cuando está visible adquiere el atributo open
Summary: es el título visible y clickable para abrir o cerrar details.
Este ejemplo es el código usado en la muestra de definición de CSS
<details>
<summary>Estilos CSS</summary>
El lenguaje usado para controlar el aspecto como se ve de la página web
</details>
Este es el ejemplo mínimo que puedes encontrar. Lo normal es que uses CSS para darle un aspecto algo más acorde con tus gustos. Por ejemplo
<style>
.boton{
border: 1px solid gray;
width: fit-content;
padding: 0 10px;
background: linear-gradient(to right, lightgray, white, lightgray);
cursor: pointer;
}
.def{
border: 1px solid lightgray;
width: 200px;
box-shadow: 2px 2px 2px 2px gray
}
</style>
Estilo botón:<br>
<details class="blq">
<summary class="boton">Estilos CSS</summary>
<div class="def">
El lenguaje usado para controlar el aspecto como se ve de la página web
</div>
</details>
Con lo que has visto ya serás capaz de crear un menú. El bloque summary serviría como encabezado o título del menú, no le puede poner un link porque el click del ratón sirve para abrirlo.
El cuerpo restante de details contendrá los items del menú como enlaces apuntanto a las urls. Esta lista puedes ponerla como lineas normales o como una lista desordenada (ul), o como un bloque flex. Cualquier estructura que mantenga una lista de entradas.
<style>
.boton{
border: 1px solid gray;
width: fit-content;
padding: 0 10px;
background: linear-gradient(to right, lightgray, white, lightgray);
cursor: pointer;
}
.def{
border: 1px solid lightgray;
width: 200px;
box-shadow: 2px 2px 2px 2px gray
}
</style>
<body>
Estilo botón:<br>
<details class="blq">
<summary class="boton">Estilos CSS</summary>
<div class="def">
El lenguaje usado para controlar el aspecto como se ve de la página web
</div>
</details>
En este caso cada item del menú se ha puesto como un bloque con un efecto hover para resaltar el item seleccionado en cada momento y con cursor tipo pointer. El menú se abre o cierra pulsando sobre su encabezado.
Ya solo queda un detalle que seguro que te estás preguntando o te vas a preguntar pronto ¿Y si no quiero ese triángulo en el inicio del bloque summary? Bueno ese marquer o marcador viene del tipo de display que usa este bloe: list-item que es l que introduce la viñeta. Es fácil de cambiar mediante una regla de estilo CSS: cmbiar el display y usar un pseudo selector :before, que llevará una propiedad contentents con la viñeta que queramos ponerle.
También se puede usar un after si quieres una viñeta después del título. O ninguno si es que simplemente quieres quitar la viñeta.
<style>
.boton{
display:inline ;
border: 1px solid gray;
width: fit-content;
padding: 0 10px;
cursor: pointer;
}
.blq .boton:before{
content:"\2630";
display:inline-block;
width:18px;
}
.blq[open] .boton:before{
content:"\268A";
display:inline-block;
width:18px;
}
.links{
text-decoration:none
}
</style>
Estilo botón:<br>
<details class="blq">
<summary class="boton">Estilos CSS</summary>
<ul class="links">
<li><a href="#">itemt1</a></li>
<li><a href="#">itemt2</a></li>
</ul>
</details>
Como ves este bloque es totalmente personalizable y tiene batantes aplicaciones: definiciones, menus, respuestas ocultas, elementos ocultos...
Con el bloque details summary podemos crear menus desplegables sencillos.
No hay posibilidades de animaciones sino es empleando CSS y/o Javascript.