Popularizada principalmente pela Amazon, a navegação em forma de abas é uma alternativa cada vez mais comum para substituir os conhecidos menus laterais. Normalmente ela é feita com o auxílio de imagens em formato GIF ou JPEG. Neste tutorial, apresentamos uma solução diferente. Veremos uma navegação em abas feita exclusivamente com texto, usando recursos do CSS (Cascading Style Sheets). O exemplo criado por INFO foi testado nos browsers Netscape 7.1, Opera 7.2 e Internet Explorer 6. Houve pequenas diferenças de alinhamento, mas nada que atrapalhasse a navegação. Os arquivos do exemplo podem ser baixados para estudo no website de INFO. O exemplo é composto de seis documentos HTML, um para cada seção do site: Home, Hardware, Software, Videogames, Contato e Cadastro. Há ainda um arquivo CSS, responsável pelo estilo, e algumas imagens usadas como ilustração. Todos os arquivos HTML têm a mesma estrutura básica, vista abaixo.

O trecho acima contém três tags <div>, um para cada parte da página. O primeiro contém o cabeçalho; o segundo, e mais importante para este tutorial, engloba as abas; e o terceiro abriga o conteúdo de cada página. Note que, no segundo trecho, as seções do site são apresentadas como itens de uma lista comum, usando os comandos <ul> e <li>.

Todos os arquivos HTML têm como referência de estilo o arquivo estilo_abas.css. Ele é o responsável por transformar os itens da lista em abas do menu de navegação. Veja o código do arquivo CSS.

O arquivo acima está dividido em oito blocos. O primeiro, identificado por “#logo”, traz a formatação do cabeçalho. Ele pode ser feito com comandos de texto ou com imagens, como no exemplo.

Os blocos 2 e 3 definem as propriedades das abas, o foco deste tutorial. O bloco 2 posiciona o menu e cria uma fina linha preta abaixo das abas, por meio do parâmetro “border-bottom: black 1px solid”. O bloco 3, identificado por “#abas ul, li”, é o mais importante. Ele indica que os itens da lista serão alinhados horizontalmente, por meio do parâmetro “display: inline;”. É também nesse bloco que temos o trecho “list-style-type: none;”. Ele elimina as habituais “bolinhas” que acompanham itens de lista num arquivo HTML convencional.

O bloco 4 determina as características dos links de cada seção, incluindo a formatação do texto e a posição. A linha “border: black 1px solid;” cria uma borda em volta de cada área, fechando o contorno das abas. O bloco 5 apenas muda a cor do link quando o mouse está sobre ele.

Terminando o arquivo, temos três blocos referentes ao conteúdo de cada seção. O primeiro determina as margens e a cor de fundo. Os outros dois são responsáveis pela formatação do texto. Pronto, nossa navegação em abas com CSS está terminada.

Desconhecidos, mas úteis

O exemplo deste tutorial usa alguns comandos pouco conhecidos do CSS, como o “display” e o “list-style-type”. Veja, abaixo, outras tags pouco comuns que podem ajudar o webmaster em casos específicos.

Clear - Como o nome indica, “limpa” um dos lados do elemento, proibindo qualquer conteúdo na área determinada. Possui os seguintes atributos: “left”, “right”, “both” e “none”.

Overflow - Determina o que acontece ao conteúdo de uma área que ultrapassa suas dimensões. Ele possui os seguintes atributos: “visible”, “hidden”, “scroll” e “auto”.

Text-transform - É usado para transformar todas as letras de um texto em maiúsculas ou minúsculas. Possui os seguintes atributos: “none”, “capitalize”, “uppercase” e “lowercase”.

Z-index - Esse comando define a ordem de empilhamento das camadas que fazem parte da página e é regulado por um número. Uma camada com valor 1 no z-index será sempre mostrada “por cima” de um elemento com valor 0.