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.
Últimos Comentarios