Fer una taula de continguts en HTML5 és ben fàcil, i ens estalviem plugins innecessaris. Si són pocs encapçalaments i poques pàgines, sempre serà millor fer-ho a codi.
Heus ací un codi exemple del funcionament d’una taula de continguts:
<div class="tabla-contenidos">
<p class="tc-titulo">Tabla de Contenidos</p>
<ul class="tc-lista">
<li><a class="tc-contenido" href="#enlace-id">Titulo 1</a></li>
<li><a class="tc-contenido" href="#enlace-id">Titulo 2</a></li>
<li><a class="tc-contenido" href="#enlace-id">Titulo 3</a></li>
<li><a class="tc-contenido" href="#enlace-id">Titulo 4</a></li>
</ul>
</div>
<h1 id="enlace-id-1">Titulo 1</h1>
<h2 id="enlace-id-2">Titulo 2</h2>
<h2 id="enlace-id-3">Titulo 3</h2>
<h2 id="enlace-id-4">Titulo 4</h2>
Si teniu problemes perquè la vostra web utilitza un “header” o “menu” fixe i en clicar per anar a un encapçalament, no funciona correctament, amb aquest codi, i posant el margin i height del vostre menú-header (i un poc més), se solucionarà:
<style>
:target::before {
content: "";
display: block;
height: 90px; /* Altura del menu-capcalera fixa*/
margin: -90px 0 0; /* altura negativa de la capcalera fixa */
}
</style>