Menús animados con JQuery

Este menú (XHTML+CSS+Javascript) deja nada que envidiarle al Adobe Flash, el autor explica como elaborarlo en este tutorial, eso, más los comentarios del código son suficientes para entender como funciona.

Necesitaras las imagenes (1,2), como el autor facilita el PSD para elaborarlas, luego no es nada difícil agregarle mas opciones al menú. El resultado es bastante atractivo, acá te dejo el código completo para que vayas haciendo tus pruebas:

Clic aquí para mostrar u ocultar el código

1.- entre etiqueta head:

<style>
    body {
        background-color:#333333;
        margin:0;
    }
   
    /* Firefox Dotted Outline Fix */
    a:active { 
        outline: none; 
    }
   
    /* Firefox Dotted Outline Fix */
    a:focus { 
        -moz-outline-style: none; 
    }
   
    /* Menu Body */
    ul#menu {
        width:80%;
        height:102px;
        background:url(bg.png) repeat-x;
        list-style:none;
        margin:0;
        padding:0;
        padding-top:20px;
        padding-left:20%;
    }
   
    /* Float LI Elements - horizontal display */
    ul#menu li {
        float:left;
    }
   
    /* Link - common attributes */
    ul#menu li a {
        background:url(sprite.png) no-repeat scroll top left;
        display:block;
        height:81px;
        position:relative;
    }
   
    /* Specify width and background position attributes 
        specifically for the class: "home" */
    ul#menu li a.home {
        width:159px;
    }
   
    /* Specify width and background position attributes 
        specifically for the class: "portfolio" */
    ul#menu li a.portfolio {
        width:157px;
        background-position:-159px 0px;
    }
   
    /* Span (on hover) - common attributes */
    ul#menu li a span {
        background:url(sprite.png) no-repeat scroll bottom left;
        display:block;
        position:absolute;
        top:0;
        left:0;
        height:100%;
        width:100%;
        z-index:100;
    }
   
    /* Span (on hover) - display pointer */
    ul#menu li a span:hover {
        cursor:pointer;
    }
   
    /* Shift background position on hover for the class: "home" */
    ul#menu li a.home span {
        background-position:0px -81px;
    }
   
    /* Shift background position on hover for the class: "portfolio" */
    ul#menu li a.portfolio span {
        background-position:-159px -81px;
    }
</style>

<!-- Incluimos el jQuery -->
<script src="jquery.js"></script>

<!-- la animation -->
<script type="text/javascript">
    $(function() {
        // set opacity to nill on page load
        $("ul#menu span").css("opacity","0");
        // on mouse over
        $("ul#menu span").hover(function () {
            // animate opacity to full
            $(this).stop().animate({
                opacity: 1
            }, 'slow');
        },
        // on mouse out
        function () {
            // animate opacity to nill
            $(this).stop().animate({
                opacity: 0
            }, 'slow');
        });
    });
</script> 

2.- en el body:

   <ul id="menu">
        <li><a href="#" class="Inicio"><span></span></a></li>
        <li><a href="#" class="Opción 1"><span></span></a></li>
        <li><a href="#" class="Opción 1"><span></span></a></li>
    </ul> 

---

El menú animado de nettus usa Ajax para mostrar los contenidos y le da así otro toque diferente e interesante, puedes consultar el tutorial, descargar el código o ver la demostración y sacar tus propias conclusiones.

---

Por ultimo, otro menú animado, -otro? si, el más simple que me he encontrado, veamos el demo.

Puede usar los efectos show, fade, slide, wind o none (sin efectos), junto con alguna de las siguientes velocidades, fast, normal o slow.

Te descargas la librería y lo demás es armar el menú e incluirla en tu pagina.

Clic aquí para mostrar u ocultar el código

1.- entre etiqueta head:

<!-- incluimos los archivos necesarios -->
<link rel="stylesheet" href="amenu.css" />
<script src="jquery.js"></script>
<script src="amenu.js"></script>

<!--  -->
<script language="JavaScript">
  $(document).ready(function(){
    $('#amenu-list').amenu({
      'speed': 200, // velocidad
      'animation': 'show' // tipo de animación
    });
  });
</script>

2.- y en el body nuestro menú:

<div id="amenu-wrapper">
  <ul id="amenu-list">
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="#">Item 2</a>
      <ul><!-- sub-menu-->
        <li><a href="#">Item 2-1</a></li>
        <li><a href="#">Item 2-2</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Item 3</a>
      <ul><!-- sub-menu 1 -->
        <li><a href="#">Item 3-1</a></li>
        <li>
          <a href="#">Item 3-2</a>
          <ul><!-- sub-menu 2 -->
            <li><a href="#">Item 2-1</a></li>
            <li><a href="#">Item 2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>