En 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. Si te parece interesante este tutorial por favor dale una revisada a los googleAds
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.