Barra de menu com CSS

Nesse tutorial você vai aprender a criar uma barra de menu em css que ficará fixa no topo do site ou no rodapé e a posição poderá ser mudada em tempo real pelo usuário.

Usaremos alguns ícones e pequenas imagens para criar esse menu em css que também terá uma pequena função javascript para possibilitar a mudança de posição do menu em tempo real, do topo para o rodapé e vice versa.

A barra de menu terá também um segundo menu com apenas links em texto.

Usaremos a propriedade css position com valor fixed para colocarmos o menu fixo e flutuante, porém como sempre, o IE não respeita o valor fixed então usaremos também um Meta Tag para corrigir o problema.

Vamos ver primeiro o código css do meu

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

<style type="text/css">

.menu,.menu2{
position:fixed;
left:0px;
width:100%;
height:45px;
background:url("bkg-azul.png");
display:block;
}
.menu{top:0px;}
.menu2{bottom:0px;}

#fs_menu,#fs_links{float:left;widht:auto;display:block;margin:auto;height:25px;padding-left:10px}
#fs_menu li,#fs_links li{display:inline;margin:10px 20px auto 0px;list-style:none;float:left;}

li a img{box-shadow: 0 1px 3px rgb(250, 250, 250); border:0px}

#fsmenu ul li a{
font-family:verdana,arial;
font-weight:bold;
color:#ffffff;
text-decoration:none;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

.divisor{
display:inline;
float:left;
height:38px;
width:1px;
border-left:1px solid #000099;
border-right:1px solid #0066ff;
display:block;
margin:3px 25px 3px auto;
}

.seta{float:right;margin:10px 5px auto auto;}

.espaco{width:100%;height:45px;display:block;}
.espaco2{display:none;}
</style>

O primeiro bloco cuida das propriedades da barra de menu e você poderá perceber que uso igualmente para as classes “menu1″ e “menu2″ menos a propriedade “top” e “bottom” que serão responsáveis pelo reposicionamento da barra de menu e posteriormente serão manipuladas dinamicamente pelo javascript, então apenas elas são colocadas de forma separada.

O  bloco seguinte é responsável pela configuração dos menus que são montados em uma lista html, como o menu é horizontal precisamos deixar as lista dos menus lineares, retirar os marcadores e cuidar do posicionamento dentro do barra de menu.

Logo em seguida cuidamos dos ícones do primeiro menu atribuindo uma sombra, não à imagem mas a caixa onde ela está contida, porém esse efeito não aparece no IE.

Seguindo com o código agora configuramos os links do segundo menu que usam apenas textos âncora.

Depois criamos um divisor para separar o primeiro menu com ícones do segundo menu apenas com textos. Esse divisor é uma DIV vazia de apenas um pixel de largura definindo cores contrastantes para as bordas esquerda e direita para dar um efeito tridimensional.

Em seguida definimos as propriedades da seta que se posicionará à direita inicialmente apontando para baixo e se o usuário clicar o menu descerá para o rodapé e a imagem da seta será trocada por outra exatamente igual só que apontando para cima e se o usuário clicar novamente o menu ira subir novamente.

Por último nos temos a configuração de uma DIV vazia que será colocada abaixo do menu para criar um espaço vertical da mesma altura do menu.

Isso é necessário pois quando você posiciona o menu com position:fixed ele fica em uma camada flutuante e os elementos que deveriam ficar abaixo da barra de menu na verdade ficariam escondidos embaixo até a altura do próprio menu. Então essa div que não usa a propriedade position, cria um espaço real, impedindo que os elementos se posicionem embaixo do menu; apenas na abertura da página porque depois o conteúdo poderá ser rolado e o menu continuará fixo no topo.

Se  o usuário clicar para o menu descer para o rodapé essa div deve desaparecer para que o conteúdo não fique com uma margem no topo, onde antes era ocupado pelo menu e isso é conseguido na última linha.

Agora vamos ao nosso código javascript:

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

<script language="JavaScript">
var fscont='0';
function desce(){
if(fscont==0){
document.getElementById('fsmenu').className="menu2"
document.getElementById('seta').src="seta-up.png"
document.getElementById('fsspaco').className="espaco2"
fscont=1
}else if(fscont==1){
document.getElementById('fsmenu').className="menu"
document.getElementById('seta').src="seta-down.png"
document.getElementById('fsspaco').className="espaco"
fscont=0
}
}
</script>

Essa pequena função será responsável pela atribuição de novas classes, tanto para a barra de menu quanto para a DIV que fica situada abaixo para criar a margem superior por baixo da própria barra de menu. E também será responsável pelo revezamento da imagem da seta.

Perceba que os elementos são manipulados através de suas IDs e chamados através de document.getElementById, se não sabe do que se trata aconselho ler o seguinte artigo: Revezando imagens com Javascript e DOM.

Para a barra de menu e a DIV de espaço é atribuída uma nova classe e  a imagem da seta é mudada diretamente manipulando o atributo “src”.

Veja também que foi criado um contador “fscont” que inicialmente possui o valor “0″ ele é responsável para detectar a posição do menu, pois se o seu valor for “0″, o menu está no topo e se for “1″ o menu está no rodapé.

Cada vez que a seta é clicada o menu é reposicionado e o valor do contador mudado, revezando-se entre “0″ e “1″, exatamente para indicar a posição do menu, para que um novo clique faça o processo inverso.

Agora o código HTML

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

<div id="fsmenu" class="menu">

<!-- MENU COM IMAGENS -->
<ul id="fs_menu">
<li><a href="#"><img src="stumbleupon.png" width="24" height="24" alt="" /></a></li>
<li><a href="#"><img src="digg.png" width="24" height="24" alt="" /></a></li>
<li><a href="#"><img src="save.png" width="24" height="24" alt="" /></a></li>
<li><a href="#"><img src="star.png" width="24" height="24" alt="" /></a></li>
<li><a href="#"><img src="database.png" width="24" height="24" alt="" /></a></li>
</ul>
<!-- FIM MENU COM IMAGENS -->

<!-- DIVISOR DOS MENUS -->
<div class="divisor">&nbsp;</div>
<!-- FIM DIVISOR DOS MENUS -->

<!-- MENU COM LINKS -->
<ul id="fs_links">
<li><a href="#">Home</a></li>
<li >|</li>
<li><a href="#">Quem Somos</a></li>
<li >|</li>
<li><a href="#">Produtos</a></li>
<li >|</li>
<li><a href="#">Serviços</a></li>
</ul>
<!-- FIM MENU COM LINKS -->

<!-- SETA À DIREITA -->
<a href="javascript:void(0)" onclick="desce()">
<img src="seta-down.png" id="seta" name="seta" width="25" height="22" alt="" border="0" class="seta" />
</a>
<!-- FIM SETA À DIREITA -->

</div>
<!-- DIV CRIA ESPAÇO VERTICAL DA LARGURA DO MENU -->
<div id="fsspaco" class="espaco">&nbsp;</div>
<!-- FIM DIV CRIA ESPAÇO VERTICAL DA LARGURA DO MENU -->

O código acima já é auto explicativo, atente apenas para o segundo menu onde os links são intercalados com um item de lista apenas com uma barra que serve como divisor.

Agora crie um documento html, coloque primeiro o código css e depois o código javascript entres as tags <head> e </head> e em seguida coloque o código html entra as tags <body> e </body>. Salve o documento como menu.html ou outro nome que queira dentro da pasta que você baixou com as imagens.

ATENÇÃO: é extremamente  importante para que funcione no IE que antes da tag <HTML> você coloque a seguinte dag de definição XHTML:

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Use também no cabeçalho, pode ser logo abaixo da tag <title> a seguinte Meta Tag:

1
2
3
4

<meta http-equiv="X-UA-Compatible"

content="IE=EmulateIE7" />

Aprenda também a  técnica de css sprites muito importante e recomendada pelo próprio Google para deixar as suas páginas mais leves, inclusive os menus: CSS Sprite – criando um menu animado.

Até a próxima.