Menus drop-down usando CSS e JavaScript

Esse post não será mais atualizado nesse blog. Para visualizar esse post em seu novo endereço, acesse:
http://milaneze.com.br/post/2009/12/26/Menus-drop-down-usando-CSS-e-JavaScript.aspx


Fazer um menu drop-down usando CSS não é tão difícil. O maior problema é manter a compatibilidade com o Internet Explorer 6. Isso envolve adicionar alguns hacks no código e usar JavaScript para fazer o que não é possível ser feito somente com CSS no IE6.

Algo que não é possível usar no IE6 e anteriores é a pseudo-classe hover em outros elementos além do a. Em navegadores em que isso é permitido, é possível usar hover para o elemento li, tornando bem simples criar o efeito de submenu.

Para contornar essa limitação do IE6, basta criar uma nova classe que seja usada para substituir a pseudo-classe hover. Com o JavaScript é possível atribuir essa classe a todos os elementos que já tenham uma outra classe, indicando que ali existe um submenu.

Como esse código JavaScript precisa ser usado somente em navegadores anteriores ao IE6, é possível usar comentários condicionais, que funcionam somente nos navegadores Internet Explorer para Windows. Assim, o Firefox não precisará usar esse código JavaScript, já que basta somente o CSS para rodar os efeitos do menu.

Esse tipo de código precisa ser testado em vários navegadores diferentes e sabemos que não é possível instalar duas versões diferentes do Internet Explorer numa mesma máquina. Uma saída para isso é usar uma máquina virtual, porém também existem alguns emuladores, como o MultipleIE. O grande problema dele é não funcionar em nem no Windows Vista, nem no Windows 7. Para não ter que rodar sempre uma máquina virtual, estou usando o IETester, que apesar de ter alguns bugs, tem funcionado muito bem para testes rápidos sem muito compromisso.

Faça aqui o download dos menus:

Menu horizontal

Menu vertical