18 Jul
Mootools Fx.Slide
Hasta la fecha nunca me había decidido a meterle mano a MooTools y Ajax pero con este theme se ha acabado, este primer paso es algo fácil pero por algo se empieza.
El primer efecto que he incorporado es el fx.slide y para hacerlo lo único que he hecho ha sido mirar el código de la demo y adaptarlo. Quizás no sea la mejor opción o la metodología que usan los profesionales pero a mi me sirve.
Lo primero es añadir MooTools y crear la clase que deseamos en el header.php de nuestro template.
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/mootools.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('cats');
$('allcat').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
mySlide.toggle();
});
</script>Una vez añadido este código solo nos queda usar las clases creadas en el lugar donde lo deseamos.
<a id="allcat" href="#" name="allcat">todas</a>
<div id="cats">
<ul>
...
</ul>
</div>Aquí acaba todo, si te interesa algún efecto más aparte del toogle solo tienes que usarlo de la misma forma, haciendo los cambios pertinentes.