MooTools Link Nudging y Navegacion, con Morph

Ya que me he vuelto unas horitas antes de mi viaje (nieva, llueve, hace frío.... uffff), voy a aprovecharlo comentando este hack (que he probado hace unos días en mi primer blog (bastante desastroso, el pobre, pero para lo que es, vale) de pruebas: si os fijáis en la barra bajo el título (inicio, principal, entradas...) veréis un efecto curioso al pasar el ratón sobre esos vínculos: el fondo "crece" hacia arriba. Además, si miráis en los primeros vínculos de la sidebar derecha, al pasar el ratón sbre ellos, veréis que se desplazan hacia la derecha.


Todo ésto lo provoca un efecto "morph", que yo he usado con Mootools, pero también teneis con Qury.

Por ahora, vamos a comentar el Mootools (barra de navegador y links):

.- SCRIPTS:

<script src='http://.../mootools-1.2.1-core-yc.js' type='text/javascript'/>

<script src='http://.../mootools-1.2-more.js' type='text/javascript'/>

<!-- Nav -->

<script type='text/javascript'>



window.addEvent(&#39;domready&#39;,function() {



$$(&#39;.navlink li a&#39;).each(function(el) {

var fx = new Fx.Morph(el,{ duration:200, link:&#39;cancel&#39; });

el.addEvents({

&#39;mouseenter&#39;: function() { fx.start({ &#39;padding-top&#39;:25 }); },

&#39;mouseleave&#39;: function() { fx.start({ &#39;padding-top&#39;: 0 }); }

});

});

});

</script>

<!-- Contact Links -->

<script type='text/javascript'>



window.addEvent(&#39;domready&#39;,function() {



$$(&#39;#main-s ul li a&#39;).each(function(el) {

var fx = new Fx.Morph(el,{ duration:300, link:&#39;cancel&#39; });

el.addEvents({

&#39;mouseenter&#39;: function() { fx.start({ &#39;padding-left&#39;: 15 }); },

&#39;mouseleave&#39;: function() { fx.start({ &#39;padding-left&#39;: 0 }); }

});

});

});

</script>

.- CSS: Para el menú de navegación (para los links no hace falta nada especial... basta con lo que ya les tengáis diseñado en vuestra plantilla a los demás links):

#nav ul {}
#nav ul li {display: block; float: left; list-style: none;}
#nav ul li a:link, #nav ul li a:visited {color: #493c34; padding: 5px 10px; position: relative; z-index: 4000;}
#nav ul li a:active, #nav ul li a:hover {background: #900; color: #ffffff; position: relative; z-index: 4000;}
#menu9 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}

.- HTML:
A) para el menú de navegación

<div id='nav'>

<ul class='navlink'>

<li><a href=''>Inicio</a></li>



<li><a href='http://masaire.blogspot.com/'>Principal</a></li>

<li><a href='http://feeds.feedburner.com/Aire'>Entradas</a></li>

<li><a href='http://feeds.feedburner.com/blogspot/aogQ'>Comentarios</a></li>

<li><a href='http://vienna-main.blogspot.com/'>Main</a></li>

</ul>

</div>

B) para los links de la sidebar:

<div id="main-s">

<ul>

<li><a href="http://www.pauldavis.deviantart.com" target="_blank">deviantART</a></li>

<li><a href="http://cafe-junio.blogspot.com/" target="_blank">Epílogo</a></li>

<li><a href="http://nada-junio.blogspot.com/" target="_blank">Nada</a></li>



<li><a href="http://cuentos-historias.blogspot.com/" target="_blank">Revolutum</a></li>

</ul>

</div>