Bloque dinámico desplegable: details
En los libros en papel es muy habtual encontrar las denominadas llamadas un numerito situado junto a algunas palabras para señalar que en el pie de la página o al final del libro o el capítulo había una aclaración o infomarción relativa al texto señalado.
Las páginas web implementan ese elemento de una forma bastante cómoda e inmediata mediante pequeños bloques que se despliegan para mostrar, por ejemplo, información adicional sobre un texto.
Y se puede hacer sin necesidad de usar javaascript o alguna regla de CSS.
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. Basta con el código HTML para plegar o desplegar el contenido 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
<head>
<style>
.boton{
<style>
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>
</head>
<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>
</body>
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.
<!doctype html>
<head>
<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>
</head>
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 bastantes 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.