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 (Cascading Style Sheets). 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 era usado no Infowester em seu layout anterior.

Graças a esses pedidos, você verá nas próximas linhas os passos básicos para criar um menu lateral usando CSS. Obviamente, espera-se que o leitor tenha conhecimentos mínimos 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 {
		loading="lazy" 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 {
		loading="lazy" 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

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.

Erika Sarti é web designer e trabalha como free-lancer desde 2000, sendo também responsável pelo layout do Infowester. Mais informações em seu blog - www.erikasarti.com - e em seu portfólio - www.erikasarti.net -.