Micaela 15 de septiembre de 2008 a las 16.00
   Imprimir artículo
elWebmaster.com

Librería para generar mapas de sitio con gran estilo


Es innegable la importancia que tienen hoy en día los sitemaps o “mapas del sitio” en las páginas webs.
Estos, además de asegurarse que todas nuestras páginas estén vinculadas e indexadas correctamente, nos ayudan a proveer a los usuarios de una previsualización de la estructura de nuestra web.

Pero… ¿Qué pasa cuándo tenemos un mapa del sitio muy grande? Para este problema la solución podría llegar a ser CSSG Sitemap Styler, este script nos permite mantener el mapa completo sin sobrecargar la página.

CSSG Sitemap Styler consiste en un pequeño código CSS y Javascript que puede aplicarse fácilmente a una lista representando el mapa de tu sitio encargándose de la presentación del mismo.

Todo lo que tenemos que hacer para utilizarlo es incluir un par de líneas sin ni siquiera necesitar tener conocimientos de Javascript.

Es importante tener en cuenta que Sitemap Styler no genera los mapas del sitio sino que simplemente les da estilo.

Para implementarlo, tu código html debería lucir así:

<ul id="sitemap">
<li><a href="#">Primera sección</a>
<ul>
<li><a href="#">Primera subsección</a>
<ul>
<li><a href="#">Primer link</a></li>
<li><a href="#">Segundo link</a></li>
<li><a href="#">Tercer link</a></li>
<li><a href="#">Cuarto link</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Teniendo esto ya definido debemos descargar la librería que más nos guste y enlazarla a nuestra página con el siguiente código:

<link href="sitemapstyler/sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="sitemapstyler/sitemapstyler.js"></script>

Los tres estilos a elegir son:

Estilo 1

estilo 1

Descargar aquí

Estilo 2

estilo 2

Descargar aquí

Estilo 3

estilo 3
Descargar aquí

Realmente generar un mapa de sitio con tan buena presentación nunca fue tan sencillo.

Fuente: CSS Globe


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. javier dice:

    Ps muchas gracias me ha parecido muy excelente este ejemplo espero puedan subir mas estilos gracias…..

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder