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