DropDown menu desplegable ajax
Categories: AJAX - Tags: AJAX, jquery, menuEn este tutorial voy a explicar como crear un menú desplegable de múltiples niveles, es decir el menu, submenu, los submenus de ese submenu y así sucesivamente y todo eso usando jquery.
Creando el menu
Primero hay que definir el menu con sus respectivos submenu para eso voy a crear un grupo de ul y li dentro un div contenedor llamado “menu”
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 | <div id="menu"> <ul id="nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a> <ul class="submenu"> <li><a href="#">Marketing</a> <ul class="subsubmenu"> <li><a href="#">Precios</a></li> <li><a href="#">Consultas</a></li> </ul> </li> <li><a href="#">Mercadotecnia</a></li> <li><a href="#">Encuestas</a></li> </ul> </li> <li><a href="#">Nosotros</a> <ul class="submenu"> <li><a href="#">Vision</a></li> <li><a href="#">Mision</a></li> </ul> </li> <li><a href="#">Otros</a></li> <li><a href="#">Contactanos</a></li> </ul> </div> |
Jquery para el menu ajax
Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> function mainmenu(){ // Oculto los submenus $(" #nav ul ").css({display: "none"}); // Defino que submenus deben estar visibles cuando se pasa el mouse por encima $(" #nav li").hover(function(){ $(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400); },function(){ $(this).find('ul:first').slideUp(400); }); } $(document).ready(function(){ mainmenu(); }); </script> |
La hoja de estilos del dropdown
He diseñado una hoja de estilos que puedas modificar fácilmente tanto para el menu, submenu y en segundo submenu pero recuerda que puedes crear cualquier cantidad de submenus
1 2 3 4 5 6 7 8 9 10 11 12 13 | * { padding:0px; margin:0px; } body { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333333; } #menu { background-image:url(nav_bg.png); background-repeat:repeat-x; height:30px; width:500px; margin:auto; padding-left:70px; } #nav { list-style:none; } #nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right; } #nav li a { display:block; padding:7px 10px; text-decoration:none; color:#CCCCCC; font-weight:bold; } #nav li a:hover { color:#FFFFFF; } /* Submenu */ #nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;} #nav ul.submenu li { float:none; background-image:none; border-bottom:1px solid #999999; width:200px;} /* Subsubmenu */ #nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;} #nav ul.subsubmenu li { float:none; background-image:none; border-bottom:1px solid #999999; min-width:200px;} |
Y eso sería todo.
Mil gracias por el desarrollo, muy facil la descarga y poder ver la demostración. Lo aplicare en mis desarrollos
De nada, te agradecería que te suscribas y ayudes a difundir un poco este blog.
* Eso inspira a seguir escribiendo XD
Esta es una version corregida, modificada y aumentada de un script sin licencia de ningun tipo, para los que quieran ver la version anterior o no entienden de que hablo visiten http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
Muy bueno el tip, quedo muy copado!, saludos.
y esto donde se pega!?
Jquery para el menu ajax
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function mainmenu(){
// Oculto los submenus
$(" #nav ul ").css({display: "none"});
// Defino que submenus deben estar visibles cuando se pasa el mouse por encima
$(" #nav li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
</script>
Eso lo pegas entre las etiquetas del encabezado
Tu sitio es todo un hallazgo, entre por una cosa y termine revisando casi todo jaj, gracias amigo. como me gustan los tutoriales le di (una) revisada al GooglAds jeje
Hola revise tu menu funciona de maravillas pero tengo un pequeño problema con los tildes como lo podria solucionar.
saludos
Hola, dale una mirada a este post ahi verás como arreglar las tildes
Muchas gracias por esta ayuda, es muy sencilla y se ve genial. Suerte y de nuevo gracias
hola miguel soy nuevo en esto pero me gusta mucho
gracias por el ejemplos son facil de entender apesar de que soy nuevo, gracias por todo
estoy haciendo mi pagina el localhost utilizando el ejemplo de diseño web modular
salidos
Hola Miguel,
Lo primero de todo muchas gracias por tu aportación, me parece muy buena
Te quería comentar un aspecto que no funciona en mi implementación. He copiado el código tal y como lo tienes en tu página pero cuando paso el ratón sobre “nosotros” y cambio rápido a “servicios” durante un breve espacio de tiempo están los dos menús desplegados. Este aspecto en la demo que tienes puesta aquí no ocurre, ya que si me sitúo sobre “nosotros” y el menú no se ha terminado de desplegar cuando me desplazo a “nosotros”, entonces el primer menú no sigue extendiéndose e inmediatamente se oculta y sólo se extiende el segundo.
No sé si me explico bien, de cualquier modo, sabrías por qué me ocurre esto?
Muchas gracias por tu ayuda,
Un saludo
De verdad magnifico y de una implementación bastante sencilla (lo tienes funcionando en menos de 5 minutos).
Pero tengo un problema:
Tengo el menú en la cabecera, de esta sigue el contenido del cuerpo del sitio, y al desplegar el menú, este se extiende y manda mi contenido hacia abajo, es decir se sobrepone a lo que hay abajo, en lugar de salir sólo de manera emergente.
Aparte de que sale sólo hacienod clic y no con evento \
Buenisimo tip, parece muy simple! trataré de implementarlo!
Directo a mis bookmarks! 
Revisa que ese submenu tenga position:absolute
Revisa tu hoja de estilos es posible que no este bien colocado el UL LI y A correspondiente
hola. muchas gracias por el menu. es buenisimo, pero me ocurre un problema. Al salir el submenu, este no sale con el efecto de la demo, sino con una especie de slideUp instantaneo (sin el fade con el que lo haces tu).
me podrias echar un cable???
gracias!!
Eso es muy sencillo fijate en la parte que dice slideDown(400), alí aumentas el valor si se pondrá más lento o puedes colocar algo como slideDown(“slow”)
Un tutorial muy bueno.
Pero tengo un problemilla. Bajo la barra de navegacion tengo una imagen.
Aparece la barra de navegacion pero no el submenu, por que puede ser?
En verdad pueden ser muchas cosas, asegurate de que los ul y los li estén correctamente ubicados y que el submenu este con position:absolute
como jala con ie7, no funciona el dropdown!!!!!
Lo he probado en IE7 usando IEtester y no me da problemas
Necesito hacer que el menú secundario se desplieguie con un click y se cierre con otro, por que yo lo despliego de forma Vertical.
Excelente muchas gracias por compartir
hola.. tengo un problema. El menu queda completamente desplegado todo el tiempo y no vuelve al estado original sin desplegar. que puede estar creando el conflicto? gracias!
hola, fijate bien a que parte del menu estas asignando las propiedades si es al ul o al div que lo contiene
Hola…Muchisimas gracias por compartir este tutorial, tu tiempo y tu trabajo…te pregunto es facil pasarlo a que sea un menu vertical.
tengo el problema, al pasar la Url, se quede desplegado, alguien me puede Ayudar???
tengo el problema que no se contrae el menu, lo estoy trabajando con url amigables o mod rewrite, lo he probado y no funciona.. quiza puedas ayudarme…
Amigo, no es ajax, se llama JQuery…
Se llama Framework AJAX = Jquery
Si, queremos ser más específicos no es AJAX porque no usa XML, asi que no pasa de ser javascript. Pero con fines prácticos y ya que el término se ha vulgarizado déjalo como AJAX
Lo puse en una lista con scroll para que salga en varios. En explorer me funciona bien , pero en safari el submenu al desplegarse sale por arriba.. me podrias ayudar en decirme en que parte debo modificar para q salga bien.
Muy bueno, sencillo y agradable; Lo probe con 7 niveles y en ves de estar creando subsubsubsub clases meti solo la primera “.submenu” todo bien por default te recorre las siguientes listas como 7px aun q es mas dificil su manejo el unico problema, espero tener tiempo de desarollarlo un poco, es que no reconoce la ventana del navegador entonces el menu se sigue y llega un momento en el que ya no ves nada.
Por otra parte te felicito, tu blog esta muy agradable te vas a favoritos.
UN SALUDO
No he podido realizar el codigo de listas.
He aqui lo que tengo, que errores tengo?
function mainmenu(){
$(” #nav ul “).css({display: “none”});
$(” #nav li”).hover(function(){
$(this).find(‘ul:first:hidden’).css({visibility: “visible”,display: “none”}).slideDown(400);
},function(){
$(this).find(‘ul:first’).slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
Inicio
Planes
Quinceañeras
A Europa
A Europa y Grecia
A Europa, Grecia y Egipto
A Suramerica
A Miami y Orlando
A Hawai, Los Angeles y las Vegas
Europa
Europa Total
Itinerario 1
Itinerario 2
De discapacitados
Estados Unidos
Oeste Americano
Este Americano
Miami y Orlando
Lejano Oriente
Lejano Oriente
Ext. Japon
Medio Oriente
Medio Oriente TtTotal
Tierra Santa y Egipto
Suramerica
Itinerario 1
Itinerario 2
Maravillas del Peru
Rusia y Escandinavia
Turismo Nacional
Africa fascinante
Peregrinaciones
Emiratos Arabes
China
Nosotros
Vision
Mision
Otros
Contactanos
Funciona con ie6? lo tengo en una pagina y el menú no me sale con ie6, con todos los demás ningún problema..
en dónde debo colocar el archivo .js??
muy bueno….dan ganas de seguir aprendiendo..
si quisiera utilizar este codigo, como lo conecto con mis web\’s\’s
a mi no me sale bien
ni q de descarga sale bien ya sale todo afuera sin efecto sin nada 
ayuda
Excelente y sencillo dropdown… lo adapte a la lista simple que ya tenia!! Gracias tremendo aporte.
Hola amigo!!, estoy muy pero muy pero muy agradecido por dedicar de su tiempo a crear este hermoso menú, es lo que estaba buscando, y por dejarlo para libre descarga.
Muchas gracias de nuevo!!
Ya me subscribí!!
Para que tenga el mismo efecto que el original se debe reemplazar slideDown(400) por show(“slow”)
Saludos
Muchas gracias, esta muy bueno el menu
Es de lo mejor que he visto, es una gran aportacion
Gracias mil veces…
Muy Buen tutorial, muchas gracias por compartirlo con nosotros, he implementado este menu en mi web, funciona perfectamente.
Solo tenia un detalle, al desplegarce el menu, este aparecia debajo de otro div, lo corregi agregando a nav ul.submenu > z-index:3;
Saludos y suerte con tu web.
Hola!
En vez de llamar a la función de jQuery para ocultar los submenu, puedes hacerlo directo por el css colocándole la propiedad “display:none” a los estilos “#nav ul.submenu” y “#nav ul.subsubmenu”, evitando así el molesto efecto donde aparecen por un según los submenu al cargar la pagina.
También noté que los submenu se tienden a colocar por detrás de algunos elementos de la página, lo solucioné agregándole la propiedad “z-index:1″ al estilo “#nav ul.submenu”.
dejo el código modificado:
#nav ul.submenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333;z-index:1;display:none}
#nav ul.subsubmenu { border:1px solid #000000; padding:5px; position:absolute; list-style:none; background-color:#333333; margin-left:150px; margin-top:-30px;display:none}
Con esto ya no es necesario utilizar el llamado a jQuery para ocultar los submenus:
”
// Oculto los submenus
$(” #nav ul “).css({display: “none”});
“
Helloo!!, muy buen aporte, muchas gracias..
Slds..
Excelente información. Ya he integrado el menu desplegable en uno de mis sitios y se visualiza perfecto con 5 de los navegadores más conocidos: ie, mozilla, safari, chrome y opera.
Hola, muchas gracias por el menu me gusta mucho, pero no me funciona igual al del demo. Al salir el submenu, este sale hacia abajo como si fuera slideDown y no hacia el lado como esta en el ejemplo de la Web y el efecto de la web queda mas elegante.
Eso mismo lo preguntó el usuario “yomimso” y no encontré la respuesta
Me podría ayudar.
Gracias
Saludos desde Perú , Disculpa pero y ddonde esta el AJAX? Esto simplemente es usando efectos Jquery , AJAX es una tecnologia síncrona , AJAX no se le denomina a este efecto .