[JQuery][MEDIO] Hacer un menú tipo acordeón

  • 2 Respuestas
  • 5592 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Xt3mP

  • *
  • Underc0der
  • Mensajes: 432
  • Actividad:
    0%
  • Reputación 0
  • Ellos me están buscando, pero yo los encontraré.
    • MSN Messenger - Xt3mP@h4x0rz.us
    • AOL Instant Messenger - Xt3mP@h4x0rz.us
    • Yahoo Instant Messenger - Xt3mP@h4x0rz.us
    • Ver Perfil
    • Xt3mP

[JQuery][MEDIO] Hacer un menú tipo acordeón

  • en: Julio 26, 2011, 09:36:01 am
Los menús tipo acordeón últimamente son un factor muy importante que no falta en la mayoría de los sitios web ya que permiten mostrar bastante información abarcando un pequeño espacio.

Existen varios métodos para hacer esto; es decir, puedes hacer un menú como estos utilizando simplemente el ingenio.

Mostraré cuatro(4)  estilos de como hacer un menú de este tipo empezando por un código largo hasta uno resumido. Utilizarémos listas para hacer de esto algo más sencillo (los ids y clases irán variando pero siempre usarémos la misma estructura):

Código: (html5) [Seleccionar]
<ul id="m1">
    <a href="#">Item 1</a>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
<ul id="m2">
<a href="#">Item 2</a>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>

Primer método:

Código: (javascript) [Seleccionar]
$(function() {
$('#m1').click(function() {
$(this).children('li').slideDown('slow');
$('#m2').children('li').slideUp('slow');
});

$('#m2').click(function() {
$(this).children('li').slideDown('slow');
$('#m1').children('li').slideUp('slow');
});
});

Hacemos uso del evento click() dependiendo del ID que den click, como se puede observar en el código se muestran los li del ID y se oculta el otro.

Segundo método:

Código: (javascript) [Seleccionar]
$(function() {
$('#m1').click(function() {
$(this).children('li').toggle('slow');
});

$('#m2').click(function() {
$(this).children('li').toggle('slow');
});
});

Usamos el mismo evento a diferencia del efecto slideDown/slideUp el cual lo sustituímos por toggle(). Este efecto intervala un efecto de manera que al 'clicarlo' una vez hará 'X' acción y al 'clicarlo' de nuevo hará la misma 'X' acción; es muy útil si se le da un uso correcto.

Los dos métodos anteriores son funcionales, pero ¿qué sucede si tenemos muchos menús?, nuestro código sería demasiado extenso; para eso utilizaremos príncipalmente el for in (cambiarémos el atributo id por class [todos deberan tener la misma clase]):

Tercer método:

Código: (javascript) [Seleccionar]
$(function() {
for(i in $('.m1')){
    $('.m1').eq( i ).click(function(){
      $(this).children('li').toggle('slow');
    });
};
});

De esta manera así tengamos 100 menús todos se manipularan bajo el código anterior, y aquí entra otra pregunta: ¿pero qué pasa si yo solo quiero que se muestre uno y se oculten los demás?, para esto harémos todavía algo más reducido y demasiado ingenioso:
Cuarto método:

Código: (javascript) [Seleccionar]
$(function() {
$('.m1').click(function(){
    $('.m1').children('li').slideUp('slow');
$(this).children('li').slideDown('slow');
})
});

¿Qué hacemos, ¡fácil!, al momento de dar click en cualquier menú ocultará todos los menús que tengan esa clase (en este caso m1) y posteriormente mostrará solo el menú en el cual se hizo click; de esta manera como la anterior podemos tener 100 menús y con ese código se manipularían todos.

Solo sería cuestión de que le agreguen algún CSS con/sin imagenes para que el resultado sea mucho mejor.
« Última modificación: Mayo 02, 2014, 10:53:52 pm por Destructor.cs »
Cada vez que me das Karma me motivas

Desconectado horrorc0re

  • *
  • Underc0der
  • Mensajes: 15
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil

Re:Hacer un menú tipo acordeón en jQuery

  • en: Julio 26, 2011, 01:39:24 pm
muy bueno Xt3mP, descargado y archivado para futuras practicas.

graxé!
Por cada error que se le atribuye a una PC siempre se encuentran al menos dos errores humanos: el de culpar a la PC y el de confiar en ella.

Desconectado Xt3mP

  • *
  • Underc0der
  • Mensajes: 432
  • Actividad:
    0%
  • Reputación 0
  • Ellos me están buscando, pero yo los encontraré.
    • MSN Messenger - Xt3mP@h4x0rz.us
    • AOL Instant Messenger - Xt3mP@h4x0rz.us
    • Yahoo Instant Messenger - Xt3mP@h4x0rz.us
    • Ver Perfil
    • Xt3mP

Re:Hacer un menú tipo acordeón en jQuery

  • en: Julio 26, 2011, 01:51:33 pm
muy bueno Xt3mP, descargado y archivado para futuras practicas.

graxé!

De nada, cualquier error o inconveniente que tengas me lo haces saber; saludos.
Cada vez que me das Karma me motivas