Codigo Menu Sitemap con animacion

Tweet

En Código Menú Sitemap os mostraba como hacer un sitemap de vuestro blog, ahora vamos a añadirle la animación. Para ello os repito los pasos a seguir para su implementación y la única diferencia esta en el script al cual le añadimos la animación.

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

CSS

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

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

<script src="URL ALOJAMIENTO/jquery-1.3.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);
});
$('.smbody p').hover(function() { //mouse in
$(this).animate({ paddingLeft: '40px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: '20px' }, 400);
});
});
</script>

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

HTML

<div class="smhead">TITULO CATEGORIA 1</div><div class="smbody"><p><a href="URL SUBCATEGORIA 1">TITULO DE LA SUBCATEGORIA 1</a></p><p><a href="URL SUBCATEGORIA 1">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