Menú desplegable con JQuery
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.
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”:
<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>
Voy a usar una función muy sencilla que se va a encargar de mostrar los submenus:
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>
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:
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;}
Recuerda:
- Llamar dentro de <head> a: "<script src="jquery.js" type="text/javascript"></script>"
- La funcion mainmenu() también dentro de head.
- Enlazar bien con jquery.js
Comentarios