Menu interactivo estilo flash pero hecho con xhtml, css y javascript

Hace ya mucho tiempo que los diseñadores han tenido que recurrir en demasía al flash para poder ofrecer interfaces más atractivas al usuario, pero ésto en muchos casos no es necesario, ya que con el uso de elementos como el css y javascript podemos lograr efectos muy interesantes que hagan más amena la interacción con el usuario. A continuación les dejo un ejemplo de ello.

Iniciamos con un menu básico:

<ul id="navigation">
<li><a href="#A">A</a></li>
<li><a href="#B">B</a></li>
<li><a href="#C">C</a></li>
<li><a href="#D">D</a></li>
<li><a href="#E">E</a></li>
</ul>

Luego aplicamos un poco de css

#navigation{
padding:0;
margin:0;
list-style:none;
position:relative;
background:#01242F url(../images/navigation-bg.jpg) repeat-x left 68px;
height:120px;
padding-top:44px;
}

y un poco más para los items del menu

#navigation li{
display:block;
float:left;
margin:0 0 0 50px;
background:url(../images/item-bg-hover.png) no-repeat;
position:relative;
}
#navigation li a{
display:block;
color:#FFF;
text-align:center;
text-decoration:none;
font-weight:bold;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
font-style:italic;
line-height:48px;
vertical-align:middle;
overflow:hidden;
width:48px;
height:48px;
position:relative;
z-index:20;
}

Lo del z-index en 20 es solo para asegurar que esté siempre encima de otro elemento que luego definiremos y que tendra z-index de 10.

Bien, hasta alli ya tenemos un bonito menu en css, pero sin mas chiste ni gracia que otro, es ahora que se inicia la magia, para ello haremos uso de jquery(un super framework js que ya han de conocer) y el plugin jquery.color.js que nos ayudará con el color, y bueno colocamos todo en el orden que ya deben conocer.

<link href="css/navigation.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/navigation.js"></script>
</head>

Ahora empezamos con el javascript

$(document).ready(function(){
$('#navigation li a').each(function(i){
$(this).after('<span class="nav-bg-hover"></span>');
$(this).after('<img src="images/item-reflex.png" alt="reflex" />');
$(this).mouseover(function(){
$(this).nextAll('.nav-bg-hover').fadeTo("slow", 0);
$(this).parent().animate({"top": "-=15px"}, "slow");
$(this).nextAll('img').animate({"top": "+=30px", "opacity": 0.3}, "slow");
$(this).animate({"color": '#002B55'}, "slow");
});
$(this).mouseout(function(){
$(this).nextAll('.nav-bg-hover').fadeTo("slow", 1);
$(this).parent().animate({"top": "+=15px"}, "slow");
$(this).nextAll('img').animate({"top": "-=30px", "opacity": 1 }, "slow");			
$(this).animate({"color": '#FFFFFF'}, "slow");
});
});
});

Como verán, recorremos los links agregando un <span> y un <img> después de éstos, también podrían cambiar éstos adicionales a sólo spans o imgs de acuerdo a su criterio, yo opté por esto puesto que la imagen se usará sólo como reflejo del botón y para el fondo me pareció que con el span podría hacer mas cosas luego. Bueno, después de eso, pasamos a establecer las acciones para el mouseover y el mouseout, primero para el mouseover seleccionamos el span con la clase "nav-bg-hover" y especificamos que haga un fade hasta cero, ésto nos dará el efecto del cambio de color en el fondo, así como los de los botons en flash, luego seleccionamos al nodo padre y creamos una animacion para que haga un desplazamiento vertical de 15px, ésto hará que todos los elementos contenidos en él suban, pero no sería un efecto realista si es que el reflejo también sube con el botón, es po ésto que debemos animar a la imagen para que tenga un desplazamiento vertical en sentido opuesto y por el doble del valor establecido para el nodo padre, cambiando su opacidad a 0.3, por último nos toca animar el color del texto del botón para que contraste mejor con el nuevo color de fondo. Ahora para el caso del mouseout basicamente hay que hacer lo mismo, sólo que se deben establecer valores opuestos a los efectos aplicados de manera que se restablesca el estado original del botón.

Ahora que ya está listo el javascript, sólo falta agregar unas lineas de estilos para poner todo en su lugar.

#navigation li img{
display:block;
position:relative;
margin:0;
padding:0;
top:3px;
}
#navigation li span{
display:block;
position:absolute;
width:100%;
height:48px;
margin:0;
padding:0;
top:0;
background:url(../images/item-bg.png) no-repeat;
z-index:10;
}

Es especialmente importante el posicionamiento de los elementos span e img, puesto que la imagen necesita position: relative para que al establecer el top, éste sea referente al link y en el caso del span, éste debe ser absolute para que se fije como fondo del boton, justo tras el link y para asegurarnos de éso establecemos su z-index a 10, que nos asegura que será menor al z-index de 20, establecido para el link.

Estas son las imágenes que usé :

navigation-bg.jpg

item-bg.png

item-bg-hover.png

item-reflex.png

Ahora sí, ya tenemos nuestro menú accesible hecho con css y algo de javascript que no tiene nada que envidiarle a los creados en flash.

Aqui les dejo el demo del sprite menu y el zip en caso quieran decargarlo, para el demo usé imágenes png con canal alfa que le dan un aspecto visual mucho mejor, aunque claro siempre pueden usar jpg gif o lo que gusten para que IE6 no los fastidie, siempre pueden mejorar el código para dar soporte a algunos navegadores problemáticos.

Como cosa adicional, les dejo de tarea que lo prueben en google chrome, al menos cuando lo probé en mi pc con version 1.0.154.43 casi me caigo de espaldas al notar que hay un problema con los png de canal alfa, durante la animacion parece que se transformara a IE6, mostrandome el mismo fondo que agrega IE a las imágenes png transparentes.

Bueno, disfrutenlo y pónganse a jugar con todos los estilos y efectos que le pueden dar.