Barra de navegação tipo botões

Publicado em: 23/08/2005

Objetivo

Este tutorial tem por objetivo mostrar uma técnica CSS para construção de barras de navegação com um visual do tipo botões clicáveis e interativos à ação do usuário quando os links são colocados no estado "over". O estado "visited" é destacado por uma tonalidade mais clara para o texto do link.

Finalidade

O tutorial foi desenvolvido tomando-se como base determinada quantidade de links, cores e tamanhos, com o propósito de exemplificar os passos de criação e estilização da barra de navegação.

Isto não significa em absoluto que você precisa ficar restrito ao que é mostrado no tutorial e muito menos simplesmente copiar e colar o código apresentado. Mostro cada etapa da criação com detalhes, com a finalidade de que ao final da leitura o perfeito entendimento da técnica mostrada possibilite a você criar suas próprias e personalizadas barras de navegação.

Uma visão antecipada da barra a construir

Para que você tenha uma visão antecipada da barra de navegação que construiremos neste tutorial, visite esta página e passe o mouse sobre os links.

A marcação XHTML para mecanismos de navegação

As Web Standards recomendam que mecanismos de navegação, ou seja, grupo de links, sejam marcados no código do documento Web com o elemento lista. Tal recomendação visa a incrementar a acessibilidade além de trazer outros benefícios, que fogem ao escopo deste tutorial discutir.

São três os tipos de listas disponíveis em (X)HTML:

• listas não ordenadas - marcadas com os elementos <ul> e <li>
• listas ordenadas - marcadas com os elementos <ol> e <li>
• listas de definição - marcadas com os elementos <dl> <dt> e <dd>

A escolha de um dos três tipos varia com o tipo de mecanismo de navegação, mas a título de orientação geral podemos dizer que a preferência de escolha deverá recair sobre as listas não ordenadas ou as listas de definição. Na prática listas ordenadas são raríssimas.
E, que entre as duas, as listas não ordenadas são usadas para a grande maioria dos mecanismos de navegação, já que estes se resumem em um conjunto de links simplesmente, sem apresentar títulos e subtítulos ou grupamentos ou indentações extras que façam de uma lista de definição uma melhor escolha.

Assim, este tutorial usaremos uma lista não ordenada para marcar nossa barra de navegação.

A marcação XHTML para a barra de navegação

Costruiremos uma barra de navegação com 07 (sete) links, perfeitamente expansível, ou seja, você poderá acresentar ou retirar links ou mesmo alterar dimensões e visual com pouco trabalho de manutenção como é característico de projetos baseados em folhas de estilo.

O código de marcação é mostrado abaixo:

<ul class="nav">
<li><a href="#na">Home</a></li>
<li><a href="#nb">Mercado</a></li>
<li><a href="#nc">Comércio</a></li>
<li><a href="#nd">Indústria</a></li>
<li><a href="#ne">Insumos</a></li>
<li><a href="#nf">Rural</a></li>
<li><a href="#ng">Contato</a></li>
</ul>

Notar que trata-se de uma marcação padrão para listas não ordenadas, onde cada item da lista é um link componente da barra a construir.
Nota: O destino do link neste tutorial é 'morto' e diferenciado para que você possa notar o estado 'visited' em ação, para cada link clicado, ao término da construção.

Veja como um navegador renderiza este código.

Retirando 'bullets' , anulando margens e tornando horizontal

Para retirar os 'bullets', ou seja,os marcadores que por padrão são renderizados antes de cada item das listas usamos a regra list-style:none;
Para zerar as margens e paddings que por padrão não são as mesmas para diferentes navegadores, usamos as regras margin:0; e padding:0;
Para tornar a lista horizontal usamos a regra display:inline e float:left;

E as regras a acresentar são :

ul.nav { 
	margin:0; 
	padding:0;
	}
	
ul.nav li {
	list-style:none;	
	display:inline;
	}
ul.nav li a {
	float:left;
	}

Veja o efeito destas regras na lista.

Definindo e isolando a área de cada link

Como você acabou de constatar, com a definição destes estilos, nossa lista inicial transformou-se em uma sequência contínua de links, um ao lado do outro.
Vamos "clarear" um pouco as coisas, definindo:

• uma borda provisória na cor vermelha para cada link
• uma largura fixa para cada link
• um tamanho e uma família de fontes
• uma cor de fundo
• uma cor de fonte
• um alinhamento central
• um padding
• retirar o sublinhado.

Observe com atenção as novas regras de estilo:

ul.nav { 
	margin:0; 
	padding:0;
	}
	
ul.nav li {
	list-style:none;	
	display:inline;
	}
ul.nav li a {
	float:left;
	border:1px solid #f00;
	width:6.0em;
	font:0.68em  Verdana, Arial, Helvetica, 
	sans-serif;
	background:#f1f1f1;
	color:#333;
	text-align:center;
	padding:0  0.2em 0.2em  0;
	text-decoration:none;
	}

Veja o efeito destas regras na lista.

Estilizando o estado "over" dos links

A seguir vamos mudar o comportamento dos links quando o usuário passa o mouse sobre eles.
Mudaremos a cor do fundo, a cor da fonte e a cor da borda.

Observe as regras de estilo para o estado "over":

ul.nav { 
	margin:0; 
	padding:0;
	}
	
ul.nav li {
	list-style:none;	
	display:inline;
	}
ul.nav li a {
	float:left;
	border:1px solid #f00;
	width:6.0em;
	font:0.68em  Verdana, Arial, Helvetica, 
	sans-serif;
	background:#f1f1f1;
	color:#333;
	text-align:center;
	padding:0  0.2em 0.2em  0;
	text-decoration:none;
	}
	ul.nav a:hover{
	background:#999;
	color:#fff;
	border-color:#00f;
	}

Veja o efeito destas regras passando o mouse sobre os links.

Simulando o efeito de botão

O efeito de que dá uma aparência de botão a cada link é conseguido com manipulação das bordas.
Escolhendo tonalidades de borda diferentes duas a duas consegue-se simular um botão normal para o estado dos links e um botão acionado para o estado hover.
Assim, adotamos provisóriamente as cores preta e azul e vamos agora mudar a cor das bordas para o link no estado normal e para o link no estado "over".
Adicionalmente vamos mudar a cor do fundo da página e acresentar uma margem.

Observe as mudanças na cor das bordas:

body {
	background:#ddd;
	margin:50px;
	}
ul.nav { 
	margin:0; 
	padding:0;
	}
	
ul.nav li {
	list-style:none;	
	display:inline;
	}
ul.nav li a {
	float:left;
	border-top:0.1em solid #fff;
	border-right:0.1em solid #909090;
	border-bottom:0.1em solid #909090;
	border-left:0.1em solid #fff;
	width:6.0em;
	font:0.68em  Verdana, Arial, Helvetica, 
	sans-serif;
	background:#f1f1f1;
	color:#333;
	text-align:center;
	padding:0  0.2em 0.2em  0;
	text-decoration:none;
	}
ul.nav a:hover{
	background:#999;
	color:#fff;
	border-color:#000 #fafafa #fafafa #000;
	}

Veja a barra pronta com os botões em ação passando o mouse sobre os links.

Conclusão

Como você acaba de constatar é muito fácil construir uma barra de navegação com folhas de estilo.
Preparei algumas outras variações de cores desta barra que acabamos de construir, que podem ser vistas:
nesta página adicional com mais seis barras em diferentes cores.