Menu dropdown com jQuery

O desenvolvimento de um menu dropdown com jQuery se resume em três etapas: criar o menu HTML; estilizar com CSS e por fim, colocar os efeitos com jQuery.

Neste exemplo vou utilizar os eventos mouseover e mouseleave.

Mouseover ocorre quando passamos o mouse sobre o elemento HTML.

Mouseleave ocorre quando retiramos o mouse do elemento.

Neste processo de desenvolvimento do menu dropdown, considero que você já tenha conhecimento do uso da biblioteca jQuery. Então irei direto aos scripts da implementação do menu dropdown.

O código HTML é bem básico, contém apenas uma div com id=”menu” e dentro dela o próprio menu em forma de lista não ordenada.

 <div id="menu">
 <ul>
 <li>
 <a href="">Desenvolvimento</a>
 </li>
 <li>
 <a href="">Programação >></a>
 <ul>
 <li>
 <a href="">PHP</a>
 </li>
 <li>
 <a href="">ASP.NET</a>
 </li>
 <li>
 <a href="">JAVA</a>
 </li>
 </ul>
 </li>
 <li>
 <a href="">Otimização</a>
 </li>
 </ul>
 </div>

Logo abaixo a estilização do menu com CSS. Atentem para o uso de position relative para a ul principal e absolute para ul secundária. O uso do position nesta ordem é essencial para que a lista e sublista fiquem alinhadas.

ul{padding:0;margin:0;}
li{list-style:none;}
#menu{width:550px;}
#menu ul{background:#ccc;height:40px;position:relative;padding:0 10px;}
#menu li{float:left;color:#fff;}
#menu a,#menu a:visited{font-size:16px;display:block;width:150px;color:#333;font-weight:bold;padding:10px 20px 10px 0;text-decoration:none;}
#menu a:hover{text-decoration:underline;}
#menu li:hover > a{font-weight:bold;color:#f00;}
#menu ul ul{background:none;width:150px;display:none;position:absolute;top:39px;height:auto;padding:0;}
#menu ul ul li{clear:both;background:#eee;}
#menu ul ul a,#menu ul ul a:visited{color:#333;width:130px;font-size:13px;padding:5px 10px;border-bottom:1px dashed #ccc;}

E por fim o código jQuery com os eventos mouseover e mouseleave. Para mouseover foi utilizado o efeito slideDown() e para mouseleave o slideUp().

$(document).ready(function(){

 $("#menu li a").mouseover(function(){
 var index = $("#menu li a").index(this);
 $("#menu li").eq(index).children("ul").slideDown();

 if($(this).siblings('ul').size() > 0){
 return false;
 }
 });

 $("#menu li").mouseleave(function(){
 var index = $("#menu li").index(this);
 $("#menu li").eq(index).children("ul").slideUp();
 });
});

Veja um exemplo deste escript funcionando em Menu dropdown com jQuery.