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
<script>// <![CDATA[
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.




Para descargar la demo debes darle like o tweet y verás el link

[social-download button_id=»12a088680d350bd27″ dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2009/01/jquery-dropdown1.zip» theme=»blue» message=»» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]