Menús estilo acordeón en JQuery

Uno de los lenguajes que nos sirve para poder hacer desarrollos más vistosos, en el sentido de animaciones o realizar efectos, fue en su momento javascript. Pero gracias a la aparición de Jquery podemos realizar muchas más cosas más fácilmente de lo que podiamos hacer con Javascript. En este caso queremos exponer el plugin de jquery “accordion”, esto nos permite hacer unos menús desplegables que hoy en día se usan en Webs reconocidas como por ejemplo la de Apple. En este tipo de menús constan de apartados importantes que contienen un “listado” de enlaces que dan accesos a los distintos apartados de la web. El funcionamiento es sencillo, simplemente cuando seleccionas uno de estos grandes apartados se despliega el menú que contiene dando paso a la lista de enlaces de ese ámbito. Veamos un ejemplo con el menú de Apple:

Vemos en la parte izquerda este tipo de menu.

Estos menús se realizan con el uso de los tags UL i LI que nos permiten realizar listados. En estos tags se le deben añadir los id’s pertinentes para que se pueda identificar el elemento que se selecciona y se pueda desplegar. Este es un ejemplo:

<ul class=”drawers” id=”menu”>
<li class=”drawer”><h2 class=”drawer-handle”>Sección 1</h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 1.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.3</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.4</a></li>
<li class=”elemento”><a href=”#”>Elemento 1.5</a></li>

<li class=”elemento”><a href=”/”>Salir</a></li>
</ul>
</li>
<li class=”drawer”><h2 class=”drawer-handle”> Sección 2 </h2>
<ul class=”submenu”>
<li class=”elemento”><a href=”#”>Elemento 2.1</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.2</a></li>
<li class=”elemento”><a href=”#”>Elemento 2.3</a></li>
</ul>
</li>
</ul>

Este es un sencillo menú con 2 apartados con varios subelementos cada uno de los apartados. Una vez hecho esto tendremos que inicializar el menú y dar la acción de despliegue en Jquery. Tanto se puede desplegar con un click del ratón, como simplemente pasando el ratón por encima (al hacer hover). La inicialización (que debería ir englobada dentro del <head> por ejemplo) de este menú podria ser tal que así:

$(document).ready(function () {

$(’LI.drawer UL:not(:first)’).hide();

$(’LI.drawer UL:first’).addClass(’open’);

$(’H2.drawer-handle’).click(function () {

$(’LI.drawer UL:visible’).hide();

$(’H2.open’).removeClass(’open’);

$(this).next().show(”slow”);

$(this).addClass(’open’);
});
});
En esta inicialización empezamos cerrando todos los elementos principales menos el primero (cada uno lo puede hacer a su gusto). Entonces se le añade a este primer elemento la clase “open”. Entonces solo se debe determinar con que evento se mostraran los elementos de los otros submenus, en el ejemplo seria con el click del elemento principal. Entonces se esconde el elemento actual, se le quita la clase open y se le asigna al nuevo elemento que se mostrará.

Son menus bastante útiles y vistosos para mostrar los accesos a los diferentes apartados de la web de una manera organizada y vistosa.

Dejar un comentario

*