É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>

Related posts:

1. Aparición consecutiva con jQuery
2. Cambiar la fuente de html con Cufón

Ventajas:

• No necesita plugins instalados en el navegador.
• Es compatible con la mayoría de navegadores del mercado.
• Es rápido. Puede reemplazar grandes téxtos rápidamente.
• Es fácil de instalar (lo vemos ahora mismo).

Instalando Cufón

1. Descarga cufón y añádelo a tu proyecto:
   

   <script src="cufon-yui.js" type="text/javascript"></script>

2. Convierte a cufón la fuente que quieres utilizar, si tu proyecto es en español no te olvides de los acentos, “eñes”, etc…
3. Añade el .js de la fuente y empieza a utilizar cufón de la siguiente manera:
   

   <script src="cufon-yui.js" type="text/javascript"></script>
<script src="Myriad.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

4. Disfruta….

Utilizando múltiples fuentes

Puedes utilizar más de una fuente a la vez en tu proyecto. Para ello toma nota de éste ejemplo:

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Helvetica.font.js" type="text/javascript"></script>
<script src="Myriad.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Helvetica' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Related posts:

1. Menú efecto acordeón con jQuery