Podremos crear un atractivo sitemap para nuestro sitio creado mediante CSS, y así hacer que Google indexe mejor nuestras páginas.

Aquí se enseña mediante unos sencillos pasos a crearlo:

1. Iniciamos creando el código HTML mediante una lista metida en un div:

<div id="sitemap">
 <ul>
  <li>Web Root
   <ul>
    <li>stuff
     <ul>
      <li>nested-deep
       <ul>
        <li>nested-deeper
         <ul>
          <li>nested-deepest</li>
         </ul>
        </li>
       </ul>
      </li>
      <li>nested deep</li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

2. Ya estaría listo, pero quedaría muy feo sin CSS, así que le añadiremos un poco de CSS:

#sitemap {
 font:normal 16px Arial,sans-serif;
 overflow:hidden;
}
#sitemap ul {
 list-style:none;
 margin:0;
 padding:0;
}
#sitemap li {
 background-color:#eee;
 margin:0 0 -0.1em;
 min-height:1em;
 padding:.2em .4em;
 position:relative;
 width:9em;
}
#sitemap ul ul {
 font-size:90%;
 margin-top:-1.4em;
}
#sitemap ul ul li {
 background:#ddd;
 border-top:0.5em solid #fff !important;
 border-left:0.5em solid #66c;
 left:10.4em;
}
#sitemap ul ul ul li {
 background:#ccc;
 border-color:#9c3;
}
#sitemap ul ul ul ul li {
 background:#bbb;
 border-color:#c93;
}
#sitemap ul ul ul ul ul li {
 background:#999;
 border-color:#c33;
 color:#fff;
}

Listo, ya estaría creado.

(Si deseamos crear el efecto al expandir el directorio, necesitaremos usar JQuery en “collapse directory”, para recrear este bonito efecto).

Vía | beTech

Compartir/Guardar