Menú en Acordeón en Ajax
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!
5 comentarios »
RSS feed para los comentarios de esta entrada. TrackBack URL
Deja un comentario
links útiles
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.
the precious info u presented do help my research for our corporation, appreaciate that.
Muy bueno, tengo una pregunta, como hago para que se despliegue el segundo o demás grupos, gracias por la ayuda
I have to voice my passion for your kind-heartedness supporting men and women who require help on this idea. Your very own commitment to getting the solution around has been exceedingly functional and have continually permitted many people just like me to arrive at their dreams. This useful tips and hints implies so much a person like me and much more to my mates. With thanks; from all of us.
food processors can really shorten the time it takes for you to prepare home cooked meals;