Criando Menu Vertical em Tableless

Aprenda a criar menus com o uso de listas

Por | @oficinadanet Programação
Olá pessoal! Hoje estou aqui para falar um pouco sobre a técnica que é usada para se construir menus. Antigamente eram usadas as tabelas, mas o Tableless veio com o objetivo de redefinir o uso das tabelas, porque afinal, as tabelas são apenas matrizes de linhas e colunas que armazenam dados, tendo seu uso especificamente para isso.

Podemos entender um menu como um agrupado de links organizados de alguma forma. Se é um agrupado de links, podemos usar as listas para construir um menu.

Então vamos lá.

vamos criar uma lista com o id = "menu"



Uma dica importante: Para a melhor compreensão dos usuários podemos usar a propriedade TITLE que define um equivalente textual para o link. Usem o TITLE para definir uma frase sobre o link.. Para a questão da acessibilidade podem ser usadas outras propriedades, mas isso será nosso objeto de estudo na próxima matéria.

Pronto, temos a lista criada..

Outra dica importante: Não usem Home ou Início no Menu. Usem o menu de forma objetiva, exibindo apenas o necessário. Se quiserem colocar um link para o início da página é só colocar um link na logotipo do site.

Agora é que está a grande jogada... Vamos tirar os marcadores:



Agora vamos fazer uma linha para separar os links:

ul#menu li {
border-bottom: 1px solid black; /* Esta borda separa os itens da lista */
}


Depois disso, vamos fazer com que o espaço todo do item da lista fique com o fundo de outra cor no estado hover:

ul#menu li a {
width: 177px; /* aqui estamos definindo a largura do link ( largura total - padding-left = 180px - 3px = 177px )
height: 18px; /* aqui se aplica a mesma situação de cima, mas não foi definido a altura ( 20px - 2px = 18px )
display: block; /* Essa aqui que é a jogada... o display com a propriedade block, o espaço todo do fundo ficará de outra cor */
padding-top: 2px;
padding-left: 3px;
font: 80% Tahoma; /* aqui estamos definindo o tamanho da fonte e o tipo da fonte, note que usamos medidas relativas, na próxima matéria iremos explicar isso. */
color: #444;
}


Vamos definir o estado hover dos links:

ul#menu li a:hover {
background: #fff; /* mudando apenas a cor do fundo do link */
}


O menu está quase pronto, iremos encontrar alguns probleminhas com os navegadores, mas nada que não possa ser corrigido. Podemos observar que no IE que a cor do hover não está preenchendo completamente.

O width é somado com o margin-left + margin-right + padding-left + padding-right + border-left + border-right. No nosso caso essa soma tem sempre que dar 180px. Mas o IE não segue essa regra, uma vez estabelecido a largura do menu, ele irá acomodar tudo lá dentro. Se resolver aumentar o tamanho da borda da direita, por exemplo, diminua o width!

então iremos usar esse código aqui para corrigir:


Pronto! Temos agora nosso menu! Estou disponibilizando um arquivo .zip com algumas modificações que fiz para deixar melhor o menu. Dê asas à sua imaginação e crie o seu! Mude bordas, fontes e tudo mais!

Um abraço e até a próxima!

Mais sobre: tableless, menu em tableless, lista
Share Tweet
DESTAQUESMais compartilhados
Comentários
AINDA NÃO SE INSCREVEU?

Vem ver os vídeos legais que
estamos produzindo no Youtube.