Taula de Continguts HTML5

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>

Leave a comment

L'adreça electrònica no es publicarà. Els camps necessaris estan marcats amb *

10 + 15 =

Ver más

  • Responsable: Jordi Juan Pérez.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a NICALIA que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.