Criando Menu Lateral em CSS

**Adm_Murilo** Sex Set 09, 2011 2:58 am

Ola Venho Postar Este Topico Ensinando a Criar um Menu em CSS. Requisitos: Conhecimento em CSS, DREAMWEAVER E BOM RACIOCINIO...

Menu Lateral em CSS

Assim como no tutorial sobre menu em abas usando CSS, aqui partiremos de uma lista ordenada. O código HTML básico é o seguinte:

<html>

<head>
<title> Menu lateral em CSS </title>
</head>

<body>

<div id="conteudo">

<h1>Menu lateral em CSS</h1>

</div>

<div id="menu">
<ul>
<li><a href="link1.htm">link1</a></li>
<li><a href="link2.htm">link2</a></li>
<li><a href="link3.htm">link3</a></li>
<li><a href="link4.htm">link4</a></li>
<li><a href="link5.htm">link5</a></li>
</ul>
</div>

</body>
</html>
Note que o código HTML não possui um Doctype ou meta-tags: você deve adicionar esses complementos posteriormente.

Agora vamos ao CSS, começando pelo body. Uma declaração bem simples, apenas para definir a cor do texto e a fonte:

body {
color: #000;
font: 12px Verdana, sans-serif;
}
Em seguida, vamos definir o CSS do <div id="conteudo"> presente no código HTML mostrado acima:

#conteudo {
width: 70%;
float: right;
text-align: center;
}
Novamente um CSS sem segredos, que define respectivamente a largura do elemento em 70%, alinhado à direita, com o texto centralizado.

Apesar de aparecer à direta da tela (e nós ocidentais fazemos a leitura da tela da esquerda para a direita), o conteúdo vem antes do menu por uma questão de acessibilidade - se o visitante estiver utilizando um leitor de tela para deficientes visuais, o conteúdo (a parte mais importante da página) será lido primeiro. Você pode saber mais sobre acessibilidade no artigo sobre a acessibilidade do InfoWester.

Agora vamos ao que realmente interessa: as declarações CSS do menu. Primeiro, definimos as características do
<div id="menu">:

#menu {
width: 30%;
margin: 0; padding: 0;
float: left;
}
Aqui o elemento tem 30% de largura, nenhuma margem e nenhum espaçamento, e está alinhado à esquerda.

Dentro desse div temos uma lista ordenada, que é o menu propriamente dito. O CSS do item (li) da lista ordenada (ul) é o seguinte:

#menu ul li {
margin: 0; padding: 0px;
border-bottom: 1px solid #CCC;
text-align: left;
list-style-type: none;
}
Nenhuma margem e nenhum espaçamento, borda inferior com 1 pixel de largura, sólida e cinza, e texto alinhado à esquerda. A última declaração (list-style-type: none;) faz com que a lista não tenha marcadores (por padrão, o símbolo •).

O próximo passo é definir o estilo do link dentro do elemento menu - ou seja, cada item dele:

#menu a:link {
background: #F5F5F5;
color: #666;
font-weight: bold;
text-decoration: none;
padding: 8px;
display: block;
}
No exemplo usamos um fundo cinza claro, com o texto cinza escuro, em negrito, sem sublinhado, com 8 pixels de espaçamento. O mais importante dessa declaração é a linha display: block;, pois é ela que faz com que os itens da lista sejam exibidos corretamente em bloco para formar a aparência que nós procuramos para o nosso menu.

E finalmente, declaramos a aparência do item do menu quando o visitante passar o mouse sobre ele - fundo azul claro, texto azul escuro:

#menu a:hover {
background: #E5F0FF;
color: #039;
}

Finalizando

Em Breve Mais..... clown