Há muitos plugins
Jquery para se fazer menus dropdown bacanas, mas usar apenas CSS para isso é muito mais interessante, não é? É isso que vamos fazer a seguir.
Primeiro vamos estruturar nosso html, segue:
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
26
27
28
29
30
31
| <ul id="menu"> <!-- Inicia o menu principal -->
<li><a href="#">Home</a> <!-- Item normal do menu -->
<li><a href="#" class="drop">Posts mais acessados</a> <!-- Item dropdown do menu, leva a class 'drop' para a adição da seta -->
<div class="columns"> <!-- Inicia o box que conterá o conteúdo do dropdown -->
<ul class="col"> <!-- Inicia o box de uma das 3 colunas com os links -->
<span>WordPress</span> <!-- Título da coluna -->
<li><a href="#">Nivo Slider For WordPress</a></li>
<li><a href="#">Usando taxonomia e posts personalizados no WordPress 3.0</a></li>
<li><a href="#">Correção do Módulo PagSeguro para WP-e-Commerce v3.2.4</a></li>
<li><a href="#">Tutoriais do WordPress 3 – Posts Personalizáveis</a></li>
<li><a href="#">WordPress + JQuery – Lista de categorias em Menu Accordion</a></li>
</ul> <!-- fecha o box de uma das 3 colunas com os links -->
<ul class="col">
<span>JQuery/HTML/CSS</span>
<li><a href="#">5 plugins JQuery para slider de imagens</a></li>
<li><a href="#">Usando border-radius no IE</a></li>
<li><a href="#">Instalando o TinyMCE no seu site</a></li>
<li><a href="#">Alguns exemplos de HTML5</a></li>
<li><a href="#">5 Livros que todo web designer deveria ler</a></li>
</ul>
<ul class="col">
<span>Miscelânea</span>
<li><a href="#">Temas premium WordPress</a></li>
<li><a href="#">Plugins premium WordPress</a></li>
<li><a href="#">Plugins Premium CSS</a></li>
<li><a href="#">Plugins Premium Javascript</a></li>
<li><a href="#">Hospedagem de Site - UolHost</a></li>
</ul>
</div> <!-- Fecha o box que conterá o conteúdo do dropdown -->
</li> <!-- Fecha item dropdown do menu -->
</ul> <!-- Fecha o menu principal -->
|
A explicação do html acima está nos próprios comentários do código
Agora vamos para o CSS, segue:
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
| #menu {
width:940px;
margin:30px auto 0px auto;
height:43px;
border-bottom:1px solid #f5f5f5;
list-style-type:none;
}
#menu li {
float:left;
position:relative; /* Importante para posicionar o conteúdo do dropdown*/
height:43px;
line-height:43px;
padding:0 10px;
margin-right:30px;
}
#menu li:hover {
background: #f5f5f5;
}
#menu li a {
font-size:14px;
color: #ccc;
display:block; /* Importante para manter visivel a imagem da 'seta' */
text-decoration:none;
}
#menu li:hover a {
color:#161616;
}
#menu li .drop {
padding-right:21px;
background:url("images/drop.png") no-repeat right 20px;
}
#menu li .columns {
position:absolute; /* Importante para posicionar o conteúdo do dropdown */
left:-9999px; /* Esconde o dropdown quando o mouse não está em cima do link */
padding:10px 4px 10px 20px;
border-top:none;
background:#F4F4F4;
width: 500px;
}
#menu li:hover .columns{
left:0;
}
#menu ul li {
line-height:21px;
font-size:12px;
}
#menu li ul.col{
display:inline;
float: left;
position: relative;
padding:0;
margin:0 0 12px 0;
width:33.33%;
}
#menu li ul.col li {
margin:0 0 10px 0;
padding:2px 6px;
width:85%;
border-bottom:1px solid #fff;
list-style-type:none;
font-size:12px;
height:100%;
position:relative;
float:none;
}
#menu li .col li:hover {
padding:2px 6px;
margin:0 0 10px 0;
border-bottom:1px solid #aaa;
}
#menu li .col span{
font-size:12px;
color:#333;
font-weight:bold;
}
#menu li .col li a{
font-size:12px;
color:#aaa;
}
#menu li .col li a:hover{color:#333;}
|
No CSS destaco o position, em #menu li que tem que ser relativo e #menu li .columnsque tem que ser absoluto, isso é para manter um posicionamento correto do box do dropdown e o mais importante é o left:-9999px; dentro também de #menu li .columns,que esconde o box do dropdown quando não está sendo acionado.
O menu foi testados nos seguintes navegadores:
IE7+, Firefox (Windows), Chrome (Windows), Safari (Windows)
Faça o download dos arquivos no link abaixo:
