Avaliação: | Publicado em: 26/09/2006

Técnica: Criando Menu

Leonardo L Procopio (mas pode me chamar de Léo!). Sou formado em Analise e Desenvolvimento de Sistemas. Trabalho com desenvolvimento deskop e web. Meu objetivo e transmitir o que sei de forma simples e descontraída!

Técnica: Criando Menu

Fala galera!

Venho aqui mais uma vez, demonstrar como é simples construir um menu legal, utilizando css!!!
Nos podemos obter um excelente resultado, tanto na apresentação quanto na marcação, e sempre com fácil alteração.

É lógico que há varias maneiras de se construir esse menu, mas eu vou seguir uma forma que eu gosto. Claro que se você achar alguma outra mais fácil, não tem problema algum. Lembre-se que cada um tem seu jeito de criar!

Primeiro passo é definir o que é um MENU. Ao meu ver, um menu são links agrupados (organizados é claro), e nada melhor para apresenta-los de forma satisfatória do que as listas não ordenadas (<ul>). São varias as vantagens em apresentar em lista, mas uma das minhas preferidas é em relação a acessibilidade, pois mesmo sem suporte a css as listas são exibidas de forma estruturada! (deu pra entender né!!!)

<ul id=”menu”>
<li><a href=#>Principal</a></li>
<li><a href=#>Letras</a></li>
<li><a href=#>Marcha</a></li>
<li><a href=#>Contato</a></li>
<li><a href=#>Vale Tudo</a></li>
</ul>

Agora vamos acrescentar uma identificação para esse nosso menu, diferenciando assim ele de qualquer outra coisa! Então acrescentamos id=”menu”.

Agora que vamos começar a escrever nosso css, nos vamos separar os hacks do ie (remendos que contornam certos erros de apresentação do navegador), e coloca-los em um código separado, e acessível somente a esse navegador.

Utilizaremos um comentários condicional quer ira fazer esse grande favor pros irmãos!!!

<style type="text/css">
<!--
ul#menu {
list-style: none;
background: #f1f1f1;
margin: 0;
padding: 0;
}
-->
</style>

Através desse background nos podemos visualizar melhor o nosso futuro menu. É certo que você notou que ele ocupa a tela inteira (na horizontal em!), e não queremos isso, vamos então dar um tamanho pra nossa criação de 170px Se liga ai fiel:

ul#menu {
list-style: none;
background: #f1f1f1;
margin: 0;
padding: 0;
width: 170px;
}

Sem mistério nenhum né shock?! (espero que sim)

Vamos agora inserir um linha separando os links. E em particular eu prefiro definir um tamanho inicial pra eles também! E fazer com que o link se estenda por toda a li (não apenas no texto dele!), e dar uma separada nele dos cantos né, e aproveitando o embalo vamos atribuir uma fonte Verdana, cor e tamanho!! Da uma olhada ai:

ul#menu li {
border-bottom: 1px solid black;
}
ul#menu li a {
width: 167px;
height: 18px;
display: block;
padding-top: 2px;
padding-left: 3px;
font: 12px Verdana;
color: #444;
}

Agora vem o lance da situação!

Vamos colocar um cor de fundo pro estado hover do nosso link (quando passamos o mouse em cima do link):

ul#menu li a:hover {
background: #fff;
}

Ta ficando legal, mas começamos a nos encontrar com determinados probleminhas (nada pra se descabelar, ou desligar o computador). Mas muitos que estão utilizando o firefox, opera, mozilla não estão vendo nada de anormal no hover do nosso menu, mas, quem esta utilizando o Internet Explorer esta percebendo que a cor do hover não esta preenchendo totalmente. E ai Léo?

Muita calma nessa hora, da uma olhada nessa imagem e veja o que tu acha:

Ou seja, width é somado com o margin-left + margin-right + padding-left + padding-right + border-left + border-right. E no nossa caso essa soma tem sempre que dar 170px.

Se resolver aumentar o tamanho da borda da direita, então diminui o width! E assim vamos!

Mas porque entramos nessa assunto?! Ah! Lembrei, é que o IE não segue essa norma!

O que conta (p/ele em!) é o tamanho do width, o resto ele acomoda lá dentro!

Mas isso é um problema que temos que contornar, e agora vamos começar a fazer nossa css pra corrigir isso! A solução vai ser colocar width: 170px pra ele (e somente ele):

<!--[if lt IE 6]>
<style type="text/css">
ul#menu li a{
width: 170px;
}
</style>
<![endif]-->

Agora eu consigo ver o sorriso no rosto de vocês!!! Essa parada!!!

E pronto, temos uma base pra começar a desenrolar nosso menu!

Vamos dar uma melhorada na sua apresentação, mas lembre-se que cada um pode fazer o que achar melhor (e essa é a melhor forma de aprender!). Acrescente mais bordar, mude as cores, tamanhos, não tenha medo de arriscar!

Da uma olhada no código final, veja o que acrescentei e faça seus próprios testes. De uma praticada boa nesse menu, que no nosso próximo artigo vamos fazer um com imagem!

Veja o código final:

-----------------------
Espero que tenha ajudado!
No proximo artigo vou mostrar uma tecnica simples e legal com imagens no nosso menu!!!
Até!
-----------------------
msn: leonardomerce@hotmail.com

twitter.com/eek_

relatosnoturno.blogspot.com

• Menu css com rollover de imagem