Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Oficina da Net » Desenvolvimento » Tableless

Criando Menu Vertical em Tableless

Publicado em: 07/01/2008 | Tableless | Visualizações: 3.604 | 4 Comentário(s)

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"

<ul id="menu">

<li><a href="#" title="Conheça nossa agência">Agência</a></li>   

<li><a href="#" title="Conheça nossa equipe" >Equipe</a></li>

<li><a href="#" title="Saiba mais sobre nossos serviços">Serviços</a></li>

<li><a href="#" title="Veja nossos trabalhos de sucesso">Portfólio</a></li>

<li><a href="#" title="Entre em contato conosco">Contato</a></li>

</ul>

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:

<style type="text/css">

ul#menu {

list-style: none;   /* aqui tiramos os marcadores */

background: #f1f1f1;  /*definindo a cor de fundo */

margin: 0px; /* zerando a margem */

padding: 0px; /* zerando o espaço entre os elementos */

width: 180px; /* aqui definimos a largura do menu, se esse atributo não estivesse definido, ele ocuparia a tela inteira */

border-top: 1px dashed #f7f7f7; /* definindo uma borda para estilizar o menu */

}

</style>

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:

<!--[if IE]>



<style type="text/css">

ul#menu li a, ul#menu li a:hover{

width: 180px;

}

</style>

<![endif]-->

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!

Arquivo anexo: Clique aqui para download

compartilhe