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; loading="lazy" 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ç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 -.