Menú efecto acordeón con jQuery

A veces tenemos un menú tan grande que no “encaja” en nuestro diseño, o simplemente queremos añadir un efecto llamativo a nuestra navegación del sitio.

Éste menú en acordeón necesita jQuery y pesa sólo 0.5KB. Soporta tantos niveles como sea necesario, links externos, información dentro del menú y es posible dejarlo abierto al navegar de una sección a otra. Ahora vemos cómo:

Creamos nuestro menú:

<ul id="menu">
    <li>
        <a href="#primerElemento">Primer elemento</a>
        <ul>
            <li>
                <a href="#">Elemento hijo1</a>
            </li>
            <li>
                <a href="#">Elemento hijo2</a>
                <div>Podemos incluir información aquí</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#segundoElemento">Segundo elemento</a>
        <ul>
            <li>
                <a href="#">Elemento hijo1</a>
            </li>
            <li>
                <a href="#">Elemento hijo2</a>
            </li>
            <li>
                <a href="#">Elemento hijo3</a>
            </li>
        </ul>
    </li>
</ul>

Descargamos y añadimos los archivos necesarios

	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery.accordion.js"></script>

Activamos el plugin

	$('#menu').accordion();

¡Ya está!

NOTA: Si queremos que la pestaña de la sección quede abierta mientras estamos en una sección de su interior se debe añadir el href del elemento padre a la dirección del hijo de la siguiente forma:

<ul id="menu">
    <li>
        <a href="#primerElemento">Primer elemento</a>
        <ul>
            <li>
                <a href="elementohijo11.html#primerElemento">Elemento hijo1</a>
            </li>
            <li>
                <a href="elementohijo12.html#primerElemento">Elemento hijo 2</a>
                <div>Podemos incluir información aquí</div>
            </li>
        </ul>
    </li>
    <li>
        <a href="#segundoElemento">Segundo elemento</a>
        <ul>
            <li>
                <a href="elementohijo1.html#segundoElemento">Elemento hijo1</a>
            </li>
            <li>
                <a href="elementohijo2.html#segundoElemento">Elemento hijo2</a>
            </li>
            <li>
                <a href="elementohijo3.html#segundoElemento">Elemento hijo3</a>
            </li>
        </ul>
    </li>
</ul>