Crea tu web, tutor html, css

Bloque dinámico: details

Un menu desplegable solo con HTML

Una de las últimas adiciones a HTML es el bloque details - summary, un bloque con complrotamiento dinámico que no necesita que definamos ningún estilo o que programemos un event con Javascript.

 
Estilos CSSEl lenguaje usado para controlar el aspecto como se ve de la página web
 

Pulsa 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 bloque details summary es un bloque desplegable construido solo con HTML. Details se usa para el contenido ocultable mientras summary es un título visible y clickable

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>
Ejemplo mínimo de un bloque details - summary.

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>
Bloque desplegable con estilos CSS aplicados

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>
Un menu desplegable

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>
Cambiando la viñeta de summary

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.