Criando menu (dropdown) em colunas com CSS

Published by Sam // On 18:21 // 0 comentários

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&acirc;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:
Menu DropDown com colunas em CSS


Fonte: http://www.marcelotorresweb.com/criando-um-menu-dropdown-com-colunas-apenas-com-css/
File Under: