Menú animado con JQuery

Animated Navigation es es un menú animado simple que requiere del uso de la librería JQuery que podemos agregar a nuestro sitio utilizando las AJAX Libraries API de Google agregando lo siguiente antes de </head>:

<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.2");
</script>

o bien, enlazándolas de manera directa:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>

El primer paso es agregar el pequeño código del script, también, antes de </head>:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $("#topnav li").prepend("<span></span>");
  $("#topnav li").each(function() {
    var linkText = $(this).find("a").html();
    $(this).find("span").show().html(linkText);
  }); 
  $("#topnav li").hover(function() {
      $(this).find("span").stop().animate({marginTop: "-40"}, 250);
    } , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
  });
//]]>
</script>

Y luego, el CSS que podremos personalizar a gusto:

<style type="text/css">
  ul#topnav {  /* el menú es una lista */
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  ul#topnav li { /* cada item de la lista */
    float: left;
    height: 40px;
    list-style-type: none;
    margin: 0;
    overflow: hidden; /* importante */
    padding: 0;
  }
  ul#topnav a, ul#topnav span { /* cada item es un enlace */
    clear: both;
    height: 20px;
    line-height: 20px;
    padding: 10px 15px;
    float: left;
    /* propiedades de color, fonto y fuente de los textos */  
  }
  #menu li a:hover { /* efecto onmouseover sobre los enlaces */
    /* propiedades de color, fonto y fuente de los textos */  
  }
</style>

Hasta allí toda la preparación, ahora, el menú en si mismo que podemos colocar en cualquier parte, donde deseemos mostrarlo:

<ul id='topnav'>
  <li><a href="direccion_URL"> MENU-1 </a></li>
  <li><a href="direccion_URL"> MENU-2 </a></li>
  <!-- cada item es un enlace -->
  <li><a href="direccion_URL"> MENU-X </a></li>
</ul>

Quienes utilicen otro tipo de framework como Prototype + Scriptaculous deben tener en cuenta que habrá un conflicto ya que las librerías son incompatibles. Para esto, hay una solución que implica editar los scripts. Otra alternativa menos elegante pero en este caso, efectiva, es usar un blog auxiliar, colocar el menú allí y cargarlo mediante un IFRAME que es el modo en que se ve en el ejemplo de esta entrada.