Menú accordeón con efectos de rebote

En este artículo vamos a mencionar un script jQuery, CSS y HTML que presenta un menú accordeon con efectos de rebote que se puede emplear para las columnas izquierda o derecha de tu página Web.

Para disfrutar de este menú, lo primero que deberemos hacer es incluir en el <head> los estilos y scripts necesarios.

<link rel="stylesheet" type="text/css" href="demo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="script.js"></script>

En el <body> podemos construir el menú con código HTML de la siguiente forma:

<ul>
      <li>

          <ul>
            <li><a href="#">Kiwis <span></span></a></li>

            <li>
                <ul>
                    <li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li>
                    <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Kiwifruit">Read on Wikipedia</a></li>
                    <li><a href="http://www.flickr.com/search/?w=all&amp;q=kiwi&amp;m=text">Flickr Stream</a></li>
                </ul>
            </li>

          </ul>

      </li>
</ul>

Si nos fijamos en las etiquetas a href vemos que lleva el evento onclick que al pulsar se ejecuta ese código jQuery que hay dentro.

Los fondos de las cabeceras son imágenes.

Ver ejemplo en funcionamiento