This site uses cookies own and third. If you continue to browse consider to accept the use of cookies. OK More Info.

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

  • 2 Replies
  • 6030 Views

0 Members and 1 Guest are viewing this topic.

Offline Xt3mP

  • *
  • Underc0der
  • Posts: 424
  • 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
    • View Profile
    • Xt3mP

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

  • on: July 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):

Code: (html5) You are not allowed to view links. Register or Login
<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:

Code: (javascript) You are not allowed to view links. Register or Login
$(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:

Code: (javascript) You are not allowed to view links. Register or Login
$(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:

Code: (javascript) You are not allowed to view links. Register or Login
$(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:

Code: (javascript) You are not allowed to view links. Register or Login
$(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.
« Last Edit: May 02, 2014, 10:53:52 pm by Destructor.cs »
Cada vez que me das Karma me motivas

Offline horrorc0re

  • *
  • Underc0der
  • Posts: 15
  • Actividad:
    0%
  • Reputación 0
    • View Profile

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

  • on: July 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.

Offline Xt3mP

  • *
  • Underc0der
  • Posts: 424
  • 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
    • View Profile
    • Xt3mP

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

  • on: July 26, 2011, 01:51:33 pm
You are not allowed to view links. Register or Login
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