T
themasterlight
ver demo Documentación
Muchos sitios web tiene una tabla de los temas que se van a tratar en una entrada, este tipo de herramienta se utiliza siempre y cuando la entrada abarque mucho contenido y les sea más fácil al lector buscar lo que le pudiera interesar. Mayormente esta herramienta se utiliza en paginas estáticas para hacer una pequeña documentación de las preguntas frecuentes que hacen los lectores.
La instalación es muy fácil, solo es agregar los estilos y modificar cada tema que aparecerá en la tabla mostrada en esta entrada, ademas de que deberán de agregar el mismo nombre para que se pueda dirigir.
Instalación
Procedemos agregar los estilos:
Insertar CODE, HTML o PHP:
.code-box {
background: #FAFAFA;
padding: 15px 20px;
border: 1px solid #EAEAEA;
color: #237DAC;
webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
box-shadow: 0 8px 16px rgba(0, 0, 0, .06);
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.code-box a{
color: #237DAC;
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 15px !important;
font-weight: 300;
line-height: 1.5em;
}Ahora agregamos la tabla de contenido en cualquier entrada o pagina estática.
Insertar CODE, HTML o PHP:
<span style="font-size: 24px;"><b>CONTENIDO</b></span> <br />
<div class="code-box">
<a href="#ACA EL TITULO DEL TEMA">1. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">2. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">3. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">4. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">5. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">6. ACA EL TITULO DEL TEMA</a><br />
<a href="#ACA EL TITULO DEL TEMA">7. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">8. ACA EL TITULO DEL TEMA</a> <br />
<a href="#ACA EL TITULO DEL TEMA">9. ACA EL TITULO DEL TEMA</a> <br />
</div><br />
<br />
Insertar CODE, HTML o PHP:
<a name="ACA TU TEMA"><span style="color: #0b5394;"><span style="font-size: large;"><b>ACA TU TEMA</b></span></span></a><br />
<br />
<p> "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</p>
<br />Puedes agregar el atributo name en: <h1>, <a> , etc......
