Menú acordeón. Haciéndolo simple con jQuery

jQuery es una biblioteca JavaScript que ya casi se está convirtiendo en un estándar. Nacida en 2006, parece que actualmente es con diferencia la más usada y su principal ventaja es que nos hace más simples la manera de manejar los documentos HTML y la manipulación del DOM, permitiéndonos modificar el contenido de una página sin que sea siquiera necesario recargarla.

Lo que veremos hoy se aprovecha de todo esto para transformar un simple par de listas anidadas en un menú tipo "acordeón", esos en los que se despliegan las sub-opciones al tiempo que se pliegan las que pudieran estar previamente abiertas. Lo podéis ver funcionando al final de esta misma entrada o en este Codepen.

Todo esto que viene a continuación lo he puesto por separado para poder ir explicándolo un poco, pero se puede copiar y pegar dentro de un gadget, un trozo tras otro -en el mismo orden en que se presentan- y funcionará sin problemas.

HTML

La lista se construye con normalidad con la etiqueta ul y sucesivos li. Todo lo meteremos dentro de una caja con una clase que he llamado menujq para poder manejar el estilo de esta lista de manera independiente a otras listas comunes que pudieran existir en la misma página.

Para las sub-opciones simplemente se anidará otra lista completa dentro de un elemento li, teniendo cuidado de cerrar ese elemento tras el cierre de la lista anidada (</ul>).

Los enlaces que servirán para desplegar no pueden llevar a ningún sitio porque no cumplirían su función, así que se rellenan con un javascript:void(); y listo.

<div class="menujq">
<ul>
 <li><a href="javascript:void();">Opción1 desplegable</a>
  <ul>
   <li><a href="URL del enlace">Opc. 1.1</a></li>
   <li><a href="URL del enlace">Opc. 1.2</a></li>
  </ul>
 </li>
 <li><a href="javascript:void();">Opción2 desplegable</a>
  <ul>
   <li><a href="URL del enlace">Opc. 2.1</a></li>
   <li><a href="URL del enlace">Opc. 2.2</a></li>
   <li><a href="URL del enlace">Opc. 2.3</a></li>
  </ul>
 </li>
 <li><a href="URL del enlace">Opción3 Directa</a></li>
</ul>
</div>

CSS

La parte del estilo, además de servirnos para configurar los tamaños y para conseguir diferenciar con color la lista principal de las anidadas, también la hemos aprovechado para añadir unos simbolitos que diferencien si el elemento es desplegable o no. Detallado queda en los comentarios.

<style>
.menujq ul {
list-style: none;
width: 80%;
margin: 0 auto;
padding: 0;
}
.menujq a {
display: block;
padding: 10px;
border-bottom: 1px solid #fff;
background: #D25400;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
}
/* Símbolo elemento normal */
.menujq ul li a:before {
content: "\25CF\00A0 ";
width: 28px;
display: inline-block;
vertical-align: top;
}
/* Símbolo elemento desplegable cerrado */
.menujq ul li.desplegable a:before {
content: "\25BA\00A0";
}
/* Símbolo elemento desplegable abierto */
.menujq ul li.desplegable.activa a:before {
content: "\25BC\00A0 ";
}
/* Eliminar símbolos para sub-opciones */
.menujq ul li.desplegable ul li a:before,
.menujq ul li.desplegable.activa ul li a:before {
content: "";
}
/* Lista anidada inicialmente oculta */
.menujq ul ul {
display: none;
width: 100%;
}
/* Sangrado y segundo color para sub-opciones */
.menujq ul ul a {
padding-left: 20px;
background: #E77E23;
text-transform: capitalize;
}
</style>

JAVASCRIPT

Y por fin el alma de todo esto, el JavaScript hilvanado con jQuery.

Básicamente lo que hace, en este orden, es:

• Buscar los elementos de lista, hijos directos de la clase menujq cuyo hijo sea una etiqueta de lista ul y añadirle una clase que he llamado desplegable. En otras palabras, localizar y marcar los elementos de lista que contienen una lista anidada dentro de ellos y que serán los únicos que se podrán desplegar.
• Controlar el clic sobre cualquier enlace dentro de las listas
• Guardar el objeto que sigue tras aquel sobre el que se ha hecho clic (comprobar)
• Limpiar todas las clases activa que se hayan podido añadir en anteriores clics...
• ...y añadírsela al elemento li que contiene el enlace sobre el que se hecho clic ahora
• Las dos últimas condiciones sirven para ver si una lista está plegada o desplegada (:visible) para añadirle el efecto de plegado (.slideUp) o desplegado (.slideDown).

<script type="text/javascript">
$(document).ready(function(){
$('.menujq > ul > li:has(ul)').addClass('desplegable');
$('.menujq > ul > li > a').click(function() {
var comprobar = $(this).next();
$('.menujq li').removeClass('activa');
$(this).closest('li').addClass('activa');
if((comprobar.is('ul')) && (comprobar.is(':visible'))) {
$(this).closest('li').removeClass('activa');
comprobar.slideUp('normal');
}
if((comprobar.is('ul')) && (!comprobar.is(':visible'))) {
$('.menujq ul ul:visible').slideUp('normal');
comprobar.slideDown('normal');
}
});
});
</script>

Y así es como quedará todo junto:

• Opción1 desplegable
  • Opc. 1.1
  • Opc. 1.2
  • Opc. 1.3
  • Opc. 1.4
  • Opc. 1.5
• Opción2 desplegable
  • Opc. 2.1
  • Opc. 2.2
  • Opc. 2.3
  • Opc. 2.4
  • Opc. 2.5
  • Opc. 2.6
  • Opc. 2.7
  • Opc. 2.8
  • Opc. 2.9
• Opción3 desplegable
  • Opc. 3.1
  • Opc. 3.2
  • Opc. 3.3
  • Opc. 3.4
  • Opc. 3.5
  • Opc. 3.6
  • Opc. 3.7
• Opción3 Directa
• Opción 5 desplegable
  • Opc. 5.1
  • Opc. 5.2
  • Opc. 5.3
  • Opc. 5.4
• Opción6 Directa

Ah, y casi se me olvida por obvio. Si queremos que esto funcione tenemos que tener la librería jQuery en nuestra plantilla. Si no es así entonces delante de todo este código o en la plantilla -si es que pensamos usarla para otros asuntos futuros- antes del cierre </head> tendremos que insertar esto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter