CSS Dropdown menu sem JavaScript ou hacks
Postado por: Pedro Rogério em
Aqueles que como eu que trabalham com desenvolvimento web sabem o quanto é complicado desenvolver um menu dropdown que além de funcionar em todos os browsers ainda funcione através do teclado, tudo isso sem a utilização de JavaScript ou Hacks CSS.
Mas Michael MacNaughton conseguiu desenvolver um menu desse tipo, que funciona em todos os browsers, inclusive no Internet Explorer 6. O código HTML pode ser visto abaixo:
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list"><a class="category" href="#Home">Home</a></li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#about">About Us »</a>
<ul class="submenu">
<li><a href="#about1">About link 1</a></li>
<li><a href="#about2">About link 2</a></li>
<li><a href="#about3">About link 3</a></li>
<li><a href="#about4">About link 4</a></li>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles »</a>
<ul class="submenu">
<li><a href="#articles1">Articles link 1</a></li>
<li><a href="#articles2">Articles link 2</a></li>
<li><a href="#articles3">Articles link 3</a></li>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News »</a>
<ul class="submenu">
<li><a href="#news1">News link 1</a></li>
<li><a href="#news2">News link 2</a></li>
<li><a class="endlist" href="#news3">News link 3</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#donate">Donate</a></li>
</ul>
<ul class="menu">
<li class="list"><a class="category" href="#contact">Contact</a></li>
</ul>
</div>
</div>
E após, aplicamos o seguinte CSS:
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
color: #666;
background-color: #fff;
margin-left: 20px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}
.wrapper {
position:relative; height:25px;
}
.mainmenu {
position:absolute;
z-index:100;
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-303px;
width:606px;
}
ul.menu {
padding:0;
margin:0;
list-style:none;
width:100px;
overflow:hidden;
float:left;
margin-right:1px;
}
ul.menu a {
background:#369;
text-decoration:none;
color:#fff;
padding-left:5px;
}
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:url(images/top1.png) no-repeat left bottom;
}
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
}
ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
color:#fff;
}
ul.submenu li a.endlist {
background:url(images/bottom1.png);
}
ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
color:#fff;
}
Vocês podem ver aqui um exemplo do menu em funcionamento, ou se preferir, pode fazer o download do menu para estudo.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
valeu pedro, vai ser muito util.
Abç.
O único ruim disso é falta de semântica no código devido ele funcionar no Internet Explorer 6.
Sinceramente, só para fazer funcionar no Internet Explorer 6 não vale apena escrever 15 linhas de código a mais.
Mas é bem legal vocẽ ter mostrado esse código pelo fato de faze-lo funcionar com o TAB, o que muitos não conseguem ou esquecem de implementar.
Abraços.
Muito interessante o que vc trouxe pra gnt…
eu particularmente faço drop down e para o ie eu uso javascript, nunca imaginei que funcionasse no ie6 sem javascript.
boa….valeu
Nossa! Pq você demorou tanto tempo para descobrir isso? rsrs
Lembra o quanto a gente apanhava pra fazer um menu desses?
Show de bola!
del.icio.us neste link rsrs
Abs
Show, como o amigo acima disse, deve ser guardado mesmo, mas, eu tenho uma dica, eu fui testá-lo aqui e quando eu seleciono um item do sub-menu e clico nele por exe: about link 1, se eu tirar o mouse dele, ele ainda fica com o menu aberto e se eu passar o mouse no menu ao lado ele mostra os sub menus tbm, eu resolvi aqui retirando as linhas onde aparece o FOCUS … ai deu certo, posso clicar no link ele iria alterar a tela ou sei la o que for e quando eu tirar o mouse ele iria sumir
=)
Abraços e valew pelo post !!!!
Interessante demais.
Ficou um pouco grande, talvez tenha-se até um pouco de dificuldade para implementar isso em um sistema dinâmico e a semântica não ficou lá essas coisas. Vou guardar e tentar aproveitar algo pq o maior interesse aqui é fazer o menu sem js.
Funciona muito bem no ie6 e 7, mas não estou conseguindo fazer funcionar no ie8 e fifefox, o menu fica sempre aberto, com os itens do sub menu.
Não está funcionando no IE, porque?
Fiz tudo correto, no Ffox funciona blz, mas no IE não desce os menus, http://www.maringanet.com/dcc
Alguém poderia me dar uma luz?
Cláudio – cjcinformatica@gmail.com
Bem que alguêm poderia dizer o pulo do gato ai neh….
To vasculhando o código aqui e não consigo entender o que dispara o evento hover no css…
Usando o firebug, eu retirei TODAS as propriedades definidas no unico hover que achei ( a:hover) e a coisa continua funcionando!!! aihauiehauihe
Bem que poderia fazer outro post soh explicando a mágica neh!(por favor).
Não tem pulo do gato nenhum. Se você tirar a primeira linha do programa, o “encanto” é quebrado e o menu para de funcionar.
Ele está apontando para o site http://www.w3.org que fornece o recurso.
Na verdade Thiago, vale a pena fazer funcionar no IE 6 SIM!
Infelizmente, ainda tem uma boa parcela de gente que o utiliza e a página não vai ficar pesada para quem usa IE 8 ou Firefox.
Bem galera, DropDown está beleza, mas como faz para ser um “drop UP”, “drop left” ou a´t mesmo “drop rigth”?
Alguem me indica um tuts ae?
Bacana e simples pena que até o momento só encontro DropDown Menus em java de forma a não serem sobrepostos por select.
Pra funcionar esse menu no IE6 o css aumenta drasticamente, putz, esse IE é uma pedra no caminho !
O único problema q estou tendo no IE (8) é q os submenus estão aparecendo por baixo das divs q vem logo a seguir.
Oi Jennifer, estou com o mesmo problema que o seu (é q os submenus estão aparecendo por baixo das divs q vem logo a seguir) se vc ja conseguiu resolver me manda a dica por favor… obirgado.
Muito bom mesmooooooooooooooooooo!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Mas (como sempre “mas”), como faço para colocar mais submenus, quero dizer, colocar mais níveis de submenu. Tipo Home > Adress > Fone / CEL???
estou com o mesmo problema da Jennifer… é q os submenus estão aparecendo por baixo das divs q vem logo a seguir no IE. No firefox ta beleza…mas no IEca os submenus ficam porbaixo das divs…. como faço??
utiliza o z-index: 999;
Olá Eduardo,
Estou com mesmo problema do pessoal aí de cima. Com apenas uma diferença. O menu só fica por baixo se eu aplico tranparência nas DIVs. Tentei o z-index mas não funcionou.
Vc tem alguma dica?
Se quiser dar uma olhada no código ele tah aqui..
http://www.4shared.com/file/1L1fR17v/website.html
Meu email: diogo.muniz@darkhound.com.br
Valeu!!
Olá Pedro.
Cara, eu tô tentando fazer um menu dropdown, puramente com HTML 5 e CSS 3 (na verdade CSS 2.1, porque não tem nada de mais de CSS 3 ainda).
O link é este: http://www.davedev.com.br/projects/developing/library/templatesWeb/html5andcss3/changeable/
O desafio é: deixar o tamanho dos links dinâmico. No exemplo que está no post, temos o inconveniente de ter um tamanho fixo, 120px.
Se alguém souber como resolve… Ah sim, o código até que está bem bacana. Quem quiser pode dar uma olhada nos fontes.
E de quebra também tem uma outra coisa no exemplo que estou fazendo: folhas alternativas. Para ver é só ir em (no Firefox) – Visualizar -> Estilo da Página -> Escolher o formato.
Abraço.
\o/ Estou enfrentando o mesmo problema que o Plínio, a Jennifer, o Cláudio, o Diogo… descreveram. Alguém me dá um help!
Bom, descobri o que pode resolver no meu caso == menu não fununcionando no ie8. Mas não adianta (?). É que a saída seria alterar o companheiro “DOCTYPE” (o que não pode ser feito, no meu caso, NÃO POSSO ALTERAR O COMPANHEIRO “DOCTYPE”. A culpa é do carinha que mora logo ali (Quirks). Se servir p/ alguém, eu vou morrer de inveja, não dá p/ fazer outra coisa: