Codigo Menu Sitemap

Tweet

El menú esta elaborado usando la librería JQuery y el truco mostrar/ocultar con esa librería.

Si no estuviésemos usando la librería JQuery debemos bajarnos este fichero, FICHERO y añadir antes de ]]></b:skin>

.smhead {
background: url(URL ICONO CATEGORIAS) no-repeat left;
cursor: pointer;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}
.smbody p{
background: url(URL ICONO SUBCATEGORIAS) no-repeat left ;
margin: 0 0 0 45px;
color:#000;
padding:2px 0 2px 20px;
font-family: 'Comic Sans MS';
}

Los iconos deberían tener una medida de 16x16 pixeles, sino deberéis ajustar los márgenes en el CSS.

Luego añadimos antes de </head>

<script src="URL ALOJAMIENTO/jquery.min.js" type="text/javascript"/>

a continuación de ese código ponemos

<script type='text/javascript'>
$(document).ready(function()
{
$(&quot;.smbody&quot;).hide();
$(&quot;.smhead&quot;).click(function()
{
$(this).next(&quot;.smbody&quot;).slideToggle(600);
});
});
</script>

Vamos a nuestra plantilla de elementos, añadimos un elemento HTML y pegamos

<div class="smhead">TITULO CATEGORIA 1</div><div class="smbody"><p><a href="http://www.blogger.com/URL">TITULO DE LA SUBCATEGORIA 1</a></p><p><a href="http://www.blogger.com/URL">TITULO DE LA SUBCATEGORIA 2</a></p><p>REPETIREMOS LOS CODIGOS ANTERIORES POR CADA SUBCATEGORIA QUE QUERAMOS INCLUIR</p></div>

Por cada categoría deberemos repetir el código anterior con sus subcategorías correspondientes.

Te recomendamos también

+ Artículos relacionados de Tutorial