em
Ultimate CSS only drop down menu

Ultimate CSS only drop down menu

Desenvolver um menu drop down em CSS que funcione em todos os browsers, incluíndo o Internet Explorer 6, não é uma tarefa fácil, mas hoje vou mostrar aqui uma forma de fazer um menu drop down somente com CSS, sem a utilização de JavaScript e crossbrowser. Vejam uma prévia do menu final.

Para aqueles que não sabem, o Internet Explorer não interpreta o :hover corretamente (digo a versão 6), ele só interpreta o :hover na tag “a”, com isso você não consegue criar o menu drop down somente com CSS, precisa do JavaScript somente para o IE6 para que funcione corretamente.

Um exemplo de uma função em JavaScript utilizada para criar menu dropdown é essa:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i

E para aqueles que utilizam jQuery, podem utilizar também essa função:

$(document).ready(function(){
	$("#menu li").hover(
		function () {
			$(this).find("ul").css({‘display':’block’});
		},
		function () {
			$(this).find("ul").css({‘display':’none’});
	});
});

Mas agora se o usuário não tem suporte a JavaScript ou navega com JavaScript desabilitado por opção, o menu não irá funcionar. A técnica que vou mostrar aqui utiliza Conditional comments para o funcionamento do menu no IE6 e foi desenvolvida por Stu Nicholls, e o menu que tomei como exemplo foi esse aqui.

Se você entendeu bem o funcionamento de Conditional comments vai entender o HTML facilmente:


Pode parecer estranho, mas são utilizadas tabelas para que o IE6 interprete o :hover corretamente e o menu funcione. Agora, vamos ao CSS:

.menu {width:745px; height:32px; position:relative; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
/* Responsável por remover as margens, padding e bullets de todas as listas */
.menu ul {padding:0; margin:0; list-style-type:none;}
.menu ul ul {width:149px;}
/* Float para tornar a lista horizontal e positipn relative para controlar as posições dos submenus */
.menu li {float:left; width:149px; position:relative;}
/* Estilos aplicados aos links de primeiro nível */
.menu a, .menu a:visited {display:block; font-size:12px; text-decoration:none; color:#fff; width:138px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#09c; padding-left:10px; line-height:29px; font-weight:bold;}


/* Background aplicado aos links de segundo nível */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(grey-arrow.gif) no-repeat 130px center;}
/* Estilos para o hover do segudo nível */
.menu ul ul a.drop:hover{background:#c9ba65 url(blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(blue-arrow.gif) no-repeat 130px center;}
/* Estilos aplicados aos links de terceiro nível */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* Estilo aplicado ao hover dos links de terceiro nível */
.menu ul ul ul a:hover {background:#b2ab9b;}


/* Esconder os sub níveis e dar-lhes uma posição absoluta para que eles ocupem nenhum espaço */
.menu ul ul {visibility:hidden; position:absolute; height:0; top:31px; left:0; width:149px; border-top:1px solid #000;}

/* Posição do menu de treceiro nível */
.menu ul ul ul{left:149px; top:-1px; width:149px;}

/* Posição do menu flutuante de terceiro nível */
.menu ul ul ul.left {left:-149px;}

/* Estilo para a tabela, necessário para que funcione no Internet Explorer */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* Estilo para o segundo nível de links */
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px; border-width:0 1px 1px 1px;}


/* Estilo para o hover dos links */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;}

/* Torna o segundo nível do menu visível quando passar o mouse sob o primeiro nível do menu ou link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* Mantém o terceiro nível oculto quando você passar o mouse sob o primeiro nível do menu ou link */
.menu ul :hover ul ul{visibility:hidden;}
/* Tornar o terceiro nível visível quando você coloca o mouse sob o segundo nível do menu ou link */
.menu ul :hover ul :hover ul{ visibility:visible;}

Como podem ver o CSS está todo comentado facilitando a compreensão, veja agora como ficou o exemplo final. Caso tenha interesse em fazer o download dos arquivos para estudo, pode baixá-los aqui.

Comentários

  1. Não pude deixar de comentar: que gambiarra!

    por João F. — Responder
  2. Tudo isso só pra dar suporte a uma porcaria de navegador que deveria estar morto? Parabéns por incentivar o uso dele enquanto a maioria esta incentivando o não uso dele.

    por Bruno — Responder
  3. @Bruno,

    Pelo contrário, por mim eu quero que o IE6 se dane. Esse blog é feito de tutoriais para desenvolvimento web e infelizmente de vez em quando tenho que mostrar alternativas que não agradam a nação.

    por Pedro Rogério Responder
  4. Eu, sinceramente, estou desenvolvendo levando como padrão que o javascript está habilitado na grande maioria dos navegadores de usuários finais. Hoje em dia é difícil ver uma aplicação web ou site que não fazem uso da linguagem, portanto, criei uma estrutura de menus em jQuery que funciona muito bem com vários níveis de submenus. Deem uma olhadinha: http://www.profissionaisti.com.br/2008/11/menu-facil-facil-com-jquery-e-css/

    Neste post eu levei um puxão de orelha do Maujor por utilizar o Javascript para este tipo de funcionalidade…hehehe. Mesmo assim acho uma solução interenssante e fácil de ser implementada.

    Abraço

    por Jackson Responder
  5. Essa solução para o IE6 ee sensacional, de verdade.
    Mas de qualquer forma me recuso a fazer um work-around desse tamanho apenas para o IE6…

    por Chris Benseler Responder
  6. Pôxa, mas sinceramente, se o cara usa Internet Explorer 6 e ainda por cima não tem Javascript habilitado, eu quero que ele morra não vou me peocupar com ele nem um pouco, pois ele não conseguirá acessar quase nada mesmo.

    por Danillo Nunes Responder
  7. @ Pedro Rogério
    Até entendo o post pela questão de estar dentro do assunto do blog, que gosto muito, mas ao menos pra mim o pessoal precisa parar de sequer mencionar a existência do IE6.

    por Bruno — Responder
  8. Bom, eu tinha feito um uma vez e tem funcionado muito bem em diversos sites e navegadores.
    Funciona para menus horizontais ou verticais de até 4 níveis e você não precisa fazer um código javascript separado. Embuti uma gambiarra pro hover diretamente via CSS.

    Zóia ae: http://elmicox.blogspot.com/2008/03/ultimate-micox-menu-drop-down-css-at-4.html

    Exemplo online: http://naironjcg.googlepages.com/menus.htm

    por Micox Responder
  9. Realmente não vale apena fazer um baita código desse para dar suporte para o Falecido IE6, mas é valido o post poque traz uma solução para que quer continuar sofrendo com essa porcaria de navegador.

    Eu já estou adotando o uso do /ignore ie6.

    João Netto
    Agência Kryzalis – Criação de Sites

    por João Netto Responder
  10. ola, gostaria de saber se esse codigo funciona em blogspot, porque ja estou enjoado de procurar um menu em css para blogspot que preste e não acho nenhum!!! por favor, me ajude ….

    por lineker Responder
  11. Passou da hora de parar de dar suporte ou tentar ajustar as coisas ao IE6. Assim ninguém para de usar essa porcaria, mas parabéns pelo trabalho!

    por Afrânio — Responder
  12. Bruno e outros vomitaram coisas do tipo: [ Tudo isso só pra dar suporte a uma porcaria de navegador que deveria estar morto? Parabéns por incentivar o uso dele enquanto a maioria esta incentivando o não uso dele. ]

    Bruno, porque você não toma no cu ao invés de criticqar o trabalho de quem está querendo ensinar. Se você fosse um desenvolvedor sério, que trabalhasse na área, saberia que o IE6 deve ser considerado, não pelo fato de ser um navegador ruim, mas pelo fato de termos bilhões de usuários que nem sequer sabem como um site é criado e como a sua programação é feita, o que eles sabem é que suas máquinas possuem um navegador, e utilizam esse navegador, e em muitas delas esse navegador é o IE6. Então, como não desenvolvemos para “nossas opiniões”, desenvolvemos para o mundo, é necessário sim criar um código grande para ele e lógico, não incentivar o abandono dele. O processo é natural e aos poucos, com o tempo, usuários migrarão para outras versões melhoradas, e Queridinho, ainda sim teremos que considerá-lo. Deixe de ser estúpido e mal informado! Pedro Rogério, parabéns pela grande divulgação e pela preocupação de tornar os trabalhos algo “visualizado” em qualquer navegador seja qual for sua versão ou configuração! Ah!! E um detalhe, Bruno…não precisa me responder, não vou voltar mais por aqui, pelo menos não neste post. Ciao, neném!

    por Letícia Responder
  13. Verdade, não sou um programador sério e não faço ideia de como funcionam as coisas na internet, mas olha que legal um pequeno exemplo de um dos sites que coloquei no ar e atualmente possui 5k de visitas por dia: 13% das visitas são feitas com IE6, 38% com IE7 e 24% com IE8. Concordo que o IE6 tem uma boa média, mas diga isso ao Google e a tantas outras aplicações gigantes que já anunciaram que não darão mais suporte ao IE6. O que dá raiva é que a gente precisa sempre estar atualizado, mas ninguém quer obrigar os usuários a se atualizarem. Já pensou se várias aplicações não obrigassem o usuário a se atualizar, imagina hoje todos usando a primeira versão do flash ou a primeira do pdf? No demais só lamento pelos palavrões, algo muito comum em pessoas sem inteligência o suficiente para encontrar argumentos válidos.

    por Bruno — Responder
  14. Bruno,
    Muitas empresas grandes ainda não homologaram nem o IE7.
    Portanto, quando é desenvolvido algo pra elas, obrigatoriamente deve funcionar no IE6.

    por Fidelis — Responder
  15. Há mto tempo que procurava um menu assim e finalmente encontrei! pra mim serve perfeitamente, é só editar as imagens pondo uma outra cor e.. já está!!

    Parabéns e mto obrigada!!!!

    por samuraika — Responder
  16. Cara valeu mesmo, tava com um belo problema em um site para a empresa que precisava de um menu drop down mas eu nao podia usar Jquery, muito bom você postar como fazer para funcionar em IE6, pois sites institucionais ainda precisam atualizar pra esse maldito navegador velho.

    por @marcosale92 — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>