content top
Menú en Acordeón en Ajax

Menú en Acordeón en Ajax

Escrito por Krato en jQuery el 07 de 22 del 2009 | 5 respuestas

Hoy veremos como crear un menu en forma de acordeón de forma sencilla tan solo con unos pocos pasos. Estos menus suelen estar en algún lateral de una web ya que se expenden o contraen de forma vertical. Éste ejemplo es muy sencillo aunque por supuesto también añadiré la descarga del archivo de ejemplo.

Bueno empecemos. Lo primo que debemos de crear el html que se necesita para que el ejemplo funcione correctamente. Ya que seguimos trabajando con jQuery necesitamos como en los otros ejemplos llamarlo, y que mejor que google. El código html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
	<script src="menu.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Menu en acordeón</title>
	<!--[if lt IE 8]>
   <style type="text/css">
   li a {display:inline-block;}
   li a {display:block;}
   </style>
   <![endif]-->
</head>
<body>
<ul id="menu">
	<li>
	 <a href="#">Menu 1</a> <!-- Un Menu  -->
<ul>
	<li><a href="#">Submenu 1</a></li>
<!-- Un SubMenu  -->
	<li><a href="#">Submenu 2</a></li>
</ul>
</li>
	<li>
	  <a href="#">Menu 2</a>
<ul>
	<li><a href="#">Submenu 1</a></li>
	<li><a href="#">Submenu 2</a></li>
</ul>
</li>
	<li><a href="http://www.kratoweb.com">Menu sin submenus</a></li>
</ul>
</body>
</html>

Lo importante:
El código en comentario es para que el ejemplo también funcione correctamente en Internet Explorer 8.

Como veis, debemos crear una lista no ordenada <ul> con el id menu. Y dentro de ese ul cada <li> será un menu (linea 21) y si dentro de cada <li> añadimos otra lista no ordenada con los items, estos serán los submenus (linea 23).

Y ahora el archivo js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$(document).ready(function() {
  $('#menu ul').hide();
  $('#menu ul:first').show();
  $('#menu li a').click(
    function() {
      var elemento = $(this).next();
      if((elemento.is('ul')) && (elemento.is(':visible'))) {
		  elemento.slideUp('normal');
        return false;
        }
      if((elemento.is('ul')) && (!elemento.is(':visible'))) {
        elemento.slideDown('normal');
        return false;
        }
      }
    );
});

Es fácil no?  Oculta las <ul>, muestra el pimer grupo de submenus para que quede uno ya activo, y por cada enlace que se pulsa muestra o esconde los submenus.

Tambión podemos cambiar la velocidad, poniendo por ejemplo los segundos que queremos que tarde:

        elemento.slideDown(4000); //4 segundos

Aquí os dejo la descarga que incluye un simple css para que veais como queda con un estilo. Bye!

Menú en acordeón



5 comentarios »

  1. PalopNo Gravatar says:
    Julio 23rd, 2009

    Que grande!! gran menu, la verdad es que es muy útil para cuando tienes muchas subcategorias, en vez de que se muestre todo a la vez. Asi todo mas ordenado.Muy bueno el ejemplo.

  2. KaseyNo Gravatar says:
    Marzo 10th, 2010

    This is themain reason I love 2kblog.net. Nice posts.

  3. khuongNo Gravatar says:
    Marzo 26th, 2010

    I am not going to be original this time, so all I am going to say that your blog rocks, sad that I don’t have suck a writing skills

  4. JonErikNo Gravatar says:
    Abril 1st, 2010

    I would appreciate more visual materials, to make your blog more attractive, but your writing style really compensates it. But there is always place for improvement

  5. Schnurlose TelefoneNo Gravatar says:
    Agosto 21st, 2010

    the precious info u presented do help my research for our corporation, appreaciate that.

Canal RSS de los comentarios de la entrada. URL para Trackback

Deja un comentario