Menu em abas em CSS num layout tableless

Por Erika Sarti, em 31_10_2006.

Introdução

O menu em abas é uma das tendências atuais do web design. A maioria dos sites com esse recurso segue a mesma estrutura: cabeçalho, menu, conteúdo e rodapé utilizando o modo tableless (ou seja, sem tabelas) de organizar esses elementos. Provavelmente você já viu muitos sites que utilizam esse esquema, e este tutorial ensinará como montar o seu.


HTML e CSS

Aqui usaremos dois arquivos: pagina.htm, com o código HTML, e style.css, com a folha de estilo. A estrutura básica do nosso código HTML é a seguinte:

<html>

	<head>
	<title> Menu em abas em CSS num layout tableless </title>
	<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
	(conteúdo)
	</body>

	</html>

Note que não está sendo usando um Doctype ou meta-tags, mas você deve adicionar esses complementos depois.

No nosso arquivo style.css, vou começar pelo estilo da tag body:

<!--
	body { background: #EEE;
	color: #000; font-size: 11px;
	font-family: Verdana, sans-serif;
	margin: 0; padding: 0;
	text-align: center;
	}
	-->

Nele, foi definido que a cor de fundo será cinza claro, o texto será na cor preta, o tamanho será de 11 pixels e a fonte utilizada na página será Verdana. Se o computador do usuário não tiver essa fonte instalada, será utilizada a segunda opção: uma fonte genérica sem serifa.

Já a linha margin: 0; padding: 0; determina que não haverá margem ou espaçamento no corpo do documento. Na prática, o nosso conteúdo ficará "colado" ao topo da página, sem nenhum espaço. Notou que junto com os valores não há unidade de medida (px, pt)? Isso acontece porque o valor é zero - quando você utilizar qualquer outro valor, não esqueça de determinar a unidade!

O text-align: center; é um truque para centralizar o conteúdo da nossa página, que continua no próximo elemento.


O div externo

Agora sim, vamos à formatação propriamente dita. Começando com um div centralizado com 750 pixels de largura, o que assegura que a página estará adequada às resoluções 800x600 e 1024x768 pixels.

No arquivo HTML, basta acrescentar duas linhas: a tag de abertura e a de fechamento do div, que será identificado como "tudo":

<body>

	<div id="tudo">

	</div>

	</body>

É no arquivo CSS que vamos definir as propriedades desse elemento:

#tudo {
	background: #FFF;
	border: #000 1px solid;
	width: 750px;
	margin: auto;
	text-align: left;
	}

Aqui definimos o que o fundo será branco, a borda será preta com 1 pixel de largura e com linha sólida e a largura do div será de 750 pixels. O atributo margin: auto; é utilizado como um truque para alinhar o elemento no centro da página: como a margem é automática, o navegador vai distribuí-la igualmente dos dois lados do elemento, centralizando-o.

Já o text-align: left; é a segunda parte do truque para centralizar o conteúdo: sem esse atributo, todo o texto da página ficaria centralizado quando ela fosse exibida no Internet Explorer. Isso se chama herança, assunto a ser abordado mais adiante.


Inserindo um cabeçalho

Vamos agora inserir o cabeçalho. No seu código HTML, você vai acrescentar:

<div id="tudo">

	<div id="cabecalho">

	   cabe&ccedil;alho

	</div>

	</div>

Aqui vamos colocar apenas a palavra "cabeçalho", mas você pode utilizar esse espaço para inserir um logotipo, banner, etc.

No nosso arquivo de estilos, damos a formatação ao elemento:

#cabecalho { background: #CCC; font-size: 18px; text-align: 
        center; padding: 30px; }

Aqui utilizamos a cor cinza para o fundo, fonte no tamanho 18 pixels, alinhamento centralizado do texto e um espaçamento de 30 pixels, para deixar o cabeçalho alto. Todos esses valores podem e devem ser adaptados ao seu layout a partir do CSS e da sua criatividade!


Inserindo o menu

Finalmente chegamos ao trecho mais importante do nosso código: o menu propriamente dito.

Vamos começar adicionando o menu no nosso código HTML logo abaixo do cabeçalho:

<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>

Sim, nosso menu é uma lista ordenada! Essa é uma amostra de como o CSS e a criatividade podem fazer efeitos incríveis em nossas páginas sem o uso de JavaScript ou Flash.

Sem o CSS, o código acima tem a seguinte aparência:

  • link1
  • link2
  • link3
  • link4
  • link5

Então vamos adicionar o estilo. Primeiramente, é necessário definir as características do div "menu":

#menu {
	background: #000;
	height: 27px;
	margin: 0; padding: 0;
	}

Em height: 27px; definimos a altura do menu; porém, essa altura vai variar de acordo com a fonte, o espaçamento e outros parâmetros. Nosso exemplo tem 27 pixels de altura, mas talvez você precise ajustar esse valor com "tentativa-e-erro" até chegar num tamanho que gere o mesmo resultado em qualquer navegador.

Como estamos utilizando uma lista ordenada, vamos definir a formatação dela:

#menu ul {
	margin: 0; padding: 0;
	margin-left: 6px;
	}

Aqui, margin-left: 6px; define a distância entre a primeira aba e a borda esquerda do elemento.

Em CSS, se uma propriedade em particular não é definida, o elemento herda essa propriedade do elemento superior. No nosso caso, o tipo de fonte definido no elemento body foi herdado por todos os elementos dentro dele. No cabeçalho, definimos um tamanho de fonte diferente, e foi esse valor que prevaleceu; já no menu, o tamanho da fonte não foi definido, então prevalece o 11px do elemento superior. É por isso que o CSS é chamado folha de estilo em cascata (Cascading Style Sheets).

Agora vamos definir o estilo dos itens do menu:

#menu ul li {
	display: inline;
	}

A propriedade display: inline; é o que define que os itens da lista aparecerão lado a lado, e não um em cada linha.

O próximo passo é definir o estilo das abas. Note que cada aba é um link; portanto, o elemento que vai receber a formatação é o a:

#menu ul li a {
	background: #444;
	color: #FFF;
	border: 1px #FFF solid;
	border-bottom: 1px #000 solid;
	float: left;
	padding: 5px 7px;
	margin: 2px;
	text-decoration: none;
	}

Neste código temos algumas novidades:

  • A propriedade border-bottom se refere à borda inferior do elemento. Também existem as propriedades border-top (topo), border-left (esquerda) e border-right (direita). Se você vai definir um estilo específico para um desses valores, sempre faça isso depois que definir a borda geral. Lembra da cascata? Se você definir a borda inferior e depois a borda geral, a segunda irá se soprepor à primeira;

  • Em float: left;, definimos o alinhamento do menu à esquerda;

  • Quando a propriedade padding apresenta dois valores, como em padding: 5px 7px;, o primeiro se refere ao espaçamento horizontal (em cima e embaixo) e o segundo ao espaçamento vertical (do lado esquerdo e do lado direito);

  • Provavelmente text-decoration: none; já lhe é familiar: essa propriedade tira o sublinhado do link.

Se você não tem muita experiência com CSS, deve estar se perguntando o que significam tantos elementos. Por partes: #menu é o elemento principal; ul é a lista ordenada; li é o item da lista e a é o link. Pensando na ordem inversa, #menu ul li a define o estilo do link do item da lista do menu. Afinal, se você definisse o estilo somente com a {color: #000;}, isso afetaria todos os links do documento, quando só queremos formatar um link específico de um div.


Realçando a aba

Aqui, uma das partes mais interessantes das abas: quando o usuário passar o mouse por cima de uma, ela fica realçada. Como fazer isso? Simples: acabamos de definir o estilo da aba como um link: agora vamos definir o estilo da aba realçada da mesma maneira que definimos um link realçado, com o atributo a:hover.

No nosso arquivo CSS acrescentamos o seguinte trecho:

#menu ul li a:hover {
	background: #FFF;
	color: #F00;
	border: #F00 1px solid;
	border-bottom: none;
	text-decoration: none;
	}

Nossa aba realçada terá fundo branco e texto e borda em vermelho. A borda inferior continua omitida, assim como o sublinhado do link.


Acrescentando o conteúdo e o rodapé

Finalizando, acrescentaremos o conteúdo e o rodapé do nosso layout.

No arquivo HTML, acrescentamos os divs para os dois elementos:

<div id="conteudo">

    conteúdo

	</div>

	<div id="rodape">

   rodapé

	</div>

Na nossa folha de estilo, definimos a aparência desses dois elementos:

#conteudo {
	clear: both;
	font-size: 12px;
	padding: 5px;
	text-align: center;
	}

	#rodape {
	clear: both;
	background: #000;
	color: #FFF;
	padding: 5px;
	text-align: center;
	}

A novidade aqui é o clear: both;, que posiciona o elemento totalmente abaixo do elemento superior (que está sendo alinhado com float). No nosso caso, se tivéssemos definido uma largura de 300 pixels para o menu e de 200 pixels para o conteúdo, como o menu leva o atributo float: left;, o conteúdo seria encaixado à direita dele.

Note que durante todo o tutorial utilizamos codificação no lugar de caracteres acentuados. No meu portfólio você encontra uma lista com todos esses códigos, para ter certeza de que a acentuação do seu site será exibida corretamente em qualquer navegador com qualquer codificação de linguagem.

Veja aqui como ficou nossa página. Você pode acessar o arquivo HTML e o CSS para analisar com calma.


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 -.