Barra de menu com simulação de botões independentes

As vezes com soluções bem simples conseguimos resolver problemas de maneira bem eficiente, e é sempre assim que deve ser feito quando for possível.

Hoje vamos criar uma barra de menu css inteiriça mas que no entanto irá simular botões independentes  com layout líquido, e isto será feito usando apenas uma lista HTML.

Com  o uso de apenas duas pequenas imagens, que estão disponíveis para download aqui: Imagens para a barra de menu css com simulação de botões independentes conseguiremos esse efeito deixando o nosso menu bastante leve e funcional.

Primeiro no Corel Draw crie uma imagem retangular mais ou menos com 48px de altura por 150 px de largura:

Em seguida arredonde levemente os cantos

Converta em curvas (ctrl+q) e seleciona a linha inferior do objeto:

Em seguida desloque um pouco para a direita conseguindo esse efeito:

Duplique a imagem e coloque alinhadas desse jeito:

Obs: o alinhamento precisa ser perfeito

Aplique um gradiente e aumente um pouco a espessura da linha igualmente nos dois botões:

Na verdade não iremos usar essas imagens completas e o nosso trabalho no Corel terminou, exporte como PSD e em seguida abra a imagem no Photoshop.

Nos iremos recortar uma fatia que representa exatamente a emenda dos botões:

Depois recortaremos uma fatia uniforme de uns 2 ou 3 px de largura:

Agora já temos as duas imagens que necessitamos para a criação da barra de menu css.

O que vamos fazer em seguida é criar um menu com uma barra que ocupará a largura total da página e com a altura da imagem do botão. Aplicaremos a segunda imagem como background e deixaremos que se repita horizontalmente apenas, depois aplicaremos a primeira imagem como divisores que criarão a ilusão de que existem botões realmente separados como na imagem abaixo:

Vamos agora ao nosso código css:

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

<style type="text/css">
*{margin:0px;}

/* |||| CONFIGURAÇÃO DA BARRA DE MENU |||||| */
#barra_menu{
width:100%;
height:48px;
background:url("bkg_barra-menu.jpg");
background-repeat:repeat-x;
}
.divisor{
line-height:46px;
min-width: 33px;
height:46px;
width:33px;
background:url("barra-menu-divisao.jpg");
background-repeat:none;
display: inline-table;
}
.item{
line-height:46px;
height:46px;
min-width: 20px;
display: inline-table;
position:relative;
}
/* || FIM CONFIGURAÇÃO DA BARRA DE MENU || */

/* |||| CONFIGURAÇÃO DOS LINKS |||||| */
a.lk:link, a.lk:visited{

text-decoration:none;

display:block;

color:#000000;
text-shadow: 0 -1px 1px rgb(216, 213, 213);
font-family:helvetica,verdana,arial;
font-weight:bold;
font-size:15px;
float:left;

}
a.lk:hover{
text-decoration:none;
display:block;
color:#fdfdfd;
text-shadow: 0 -1px 1px rgb(216, 213, 213);
font-family:helvetica,verdana,arial;
font-weight:bold;
font-size:15px;
padding:0px;
}
/* ||| FIM CONFIGURAÇÃO DOS LINKS ||| */
</style>

Primeiro zeramos as margens de qualquer elemento html e as aplicaremos onde for necessário.

É interessante fazer isso porque dependendo do navegador o valor padrão pode ser diferente e fazendo assim você começa do zero para todos.

Aprenda criar um site super profissional em 24 horas, mesmo sem experiência anterior, veja como Clicando Aqui!

Depois cuidaremos da nossa barra de menu com a configuração da própria barra que é criada na tag UL da nossa lista onde será montado o menu.

Em seguida criaremos uma classe para os divisores “.divisor” tendo o cuidado de não deixar repetir o background pois a imagem será exatamente da emenda dos botões e mais adiante aplicaremos nas tags LI que servirão como divisores.

Depois criaremos outra classe “.item” que também será uma tag LI onde estarão contidos os nosso links.

Essas duas classes se revezarão ao longo do nosso menu para criar  a aparência desejada.

Em seguida a configuração dos links, iguais para link normal e visitado e com uma mudança de cor no estado “hover”.

Feito isso só precisamos montar o nosso menu aplicando as classes correspondentes, veja:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul id="barra_menu">

<li class="item"><a href="#" class="lk">Quem Somos </a></li>
<li class="divisor"></li>
<li class="item"><a href="#" class="lk">Nossos Produtos</a></li>
<li class="divisor"></li>
<li class="item"><a href="#" class="lk">Nossos Serviços</a></li>
<li class="divisor"></li>
<li class="item"><a href="#" class="lk">Contato</a></li>
<li class="divisor"></li>

</ul>

Está pronto o nosso menu, agora é só salvar em um documento html colocado o código css no cabeçalho e o código html no corpo do documento e jogando em uma pasta juntamente com as duas imagens.

Aproveite e aprenda também a criar um menu que usa a técnica de CSS Sprites para diminuir o número de requisições de imagens deixando a página melhor otimizada: CSS Sprite – criando um menu animado.

Obs: essa técnica é altamente recomendável quando se usa muitas imagens diferentes em um menu.

Até a próxima.