ir para o conteúdo | ir para o menu | ?

InfoWester

www.infowester.com

Pesquisa personalizada

(O que é RSS?)

Notícias Recentes

Últimas do Blog

Tamanho do texto

Aumentar o tamanho do texto Diminuir o tamanho do texto

Web

Criando um menu lateral com CSS

Por Erika Sarti, em 20/10/2008.

Introdução

Há algum tempo eu publiquei aqui no InfoWester um tutorial que mostra como criar um menu em abas usando CSS. Esse texto tem sido bastante consultado e, desde a sua publicação, venho recebendo e-mails de algumas pessoas pedindo outros tutoriais, sendo que boa parte dessas mensagens pede para que eu explique como criar um menu lateral semelhante ao que é usado aqui no InfoWester.

Graças a esses pedidos, você verá nas próximas linhas os passos básicos para criar um menu lateral usando CSS (Cascading Style Sheets). Obviamente, espera-se que o leitor tenha conhecimento mínimo de HTML e CSS para que possa compreender todas as instruções do texto.

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>

Ilustração CSS 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 Melhorando 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;
	}

.: Livros sugeridos :.

:: Use a cabeça: HTML com CSS e XHTML

:: CSS (Folhas de Estilo): Dicas e Truques

:: Não me faça pensar - Uma abordagem de bom senso à usabilidade na Web

Via Shopping UOL

Finalizando

Depois desses passos, você terá um menu básico pronto para ser aplicado em um layout que está criando. É possível ver como ficou o nosso exemplo aqui. A partir disso - e com algum conhecimento em HTML e CSS, obviamente - você poderá adequar esse menu de acordo com as necessidades do seu site, personalizando cores e outros recursos visuais.

Restou alguma dúvida? Deixe seu comentário no Fórum InfoWester. Você também pode utilizar o fórum para nos enviar sugestões de tutoriais ;-)

Erika Sarti é web designer e trabalha como free-lancer desde 2000. É a responsável pelo novo layout do InfoWester, basicamente feito com tableless, um de seus assuntos preferidos. Seu portfólio está em www.erikasarti.net.