Cuando vi por primera vez la frase Thinking different no pensaba que fuera para tanto. Hace ya un tiempo que me aburro con el ordenador -llámalo ordenador o llámalo Mac.

Me acuerdo que no hace mucho me podía pasar horas y horas sin protestar pero ahora, en mi tiempo de ocio con él, leo los pocos feeds que tengo, reviso -que no leo- algún que otro periódico online, pongo a bajar el nuevo episodio de la serie americana de turno, pongo algo de música y si te he visto no me acuerdo.

Se que en parte es normal, los últimos meses me he apartado bastante del blogging y el freelance, igual por haber cogido demasiadas asignaturas sobre programación o, seguramente, por haber multiplicado mi vida social. Pero antes mi tiempo libre en casa era para el ordenador, ahora hago las cuatro cosas que he comentado y ahí me quedo mirando al infinito.

Vale, seguramente no tiene nada que ver con el Thinking different pero también es verdad que ahora mi SO me lo da todo masticado, antes en Gentoo o Debian perdía/invertía mucho tiempo en optimizar algunas cosas.

Como he tenido bastante tiempo libre con el puente y estudiar como que para otro día, he estado creando un menú para jordivillar.com, del cual podréis ver un ejemplo en menuSlide.

Todo ha sido tomando como ejemplo el que tienen en Bahia Studio que espero que no les moleste que haya fusilado bastante parte de su código.

La función en JavaScript necesita mootools para funcionar y la podéis descargar desde este enlace menu.js

Antes de cerrar la etiqueta head deberemos llamar al código JS de la siguiente manera:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
    window.addEvent('domready', function() {
        new SlideList($E('ul', 'navbar'), {duration: 450});
    });
</script>

Una vez hecho esto tendremos que crear nuestro menú:

<div id="navbar">
    <ul>
        <li id="menu_inicio" class="current"><a href="#">Inicio</a></li>
        <li id="menu_about"><a href="#">About</a></li>
        <li id="menu_cv"><a href="#">CV</a></li>
        <li id="menu_contacto"><a href="#">Contacto</a></li>
        <li class="background"><div class="left">&nbsp;</div></li>
    </ul>
</div>

Y por última añadirle el estilo mediante el siguiente CSS:

Seguir leyendo… »