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… »