Fórum Habbosal
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.

Ir para baixo
jumpersman
jumpersman
Iniciante
Iniciante
Mensagens Mensagens : 3
Like Like : 0
Idade Idade : 43
http://ssssss.com.br

Construção de uma barra de navegação Empty Construção de uma barra de navegação

Ter Jan 25 2011, 15:35
Técnicas de construção de uma barra de navegação
Post do Ano de 2004

Uma técnica bastante simples para a construção de uma barra de navegação consiste em se enclausurar os links dentro um parágrafo.

Outra, seria através do uso de listas com declaração inline (para torná-la horizontal).
Vamos abordar neste tutorial a primeira opção e com 04 (quatro) links.

Adiante você verá que este código é válido para qualquer número de links, podendo ser adaptado a qualquer necessidade atual e previsão de expansão futura - tamanho da barra de navegação.

Este código servirá de base para desenvolvermos todo o estudo proposto neste tutorial.

Código:
[/font][font=Arial]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Home[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Quem somos[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Portfólio[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Contato[/url]
[/font][font=Arial]


Este código HTML é renderizado pelo navegador e apresentado na tela do computador conforme mostrado na figura abaixo:
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Classe e estilização da barra de navegação

Nossa barra de navegação está enclausurada dentro de um elemento HTML,
(parágrafo).

Vamos estilizar este elemento, sem contudo afetar TODOS os parágrafos da página.

Não vamos querer que TODOS os parágrafos da página tenham o mesmo aspecto da barra de navegação.

Criaremos então uma classe para aplicar no parágrafo que contém a barra de navegação.

Chamemos a classe de .barNav e vamos supor os seguintes parâmetros de estilização:

família de letras: Arial, Verdana,Helvetica, sans-serif;
tamanho da letra: 12px;
cor da letra: preta (#000) em fundo laranja (#FFC50C);
decoração: links sem sublinhado;
borda de 1px em cor preta (#000)
espaçamento:em cima e em baixo=1px e nos lados=5px;
margens a direita: 1px (controla o espaçamento entre os links).
Nota: As propriedades padding e margin controlam:

padding: o espaçamento entre as bordas e o texto de cada link;

margin: o espaço entre os links.

As regras CSS para o estado inicial dos links

Vamos primeiramente aplicar estilos para os links em seu estado inicial.

E aqui entra o seletor a dentro da classe barNav

A seguir as regras CSS para os parâmetros que estabelecemos para os links na nossa barra de navegação:

Código:
.barNav a {
font:12px  Arial,Verdana,Helvetica,sans-serif;
color: #000;
text-decoration: none;
background: #FFC50C;
text-align: center;
padding: 1px 5px;
margin-right: 1px;
border: 1px solid #000;
}[/img]

As regras CSS para o estado mouse sobre os links

A seguir aplicaremos estilos para os links no estado quando o mouse passa sobre eles, para simular o efeito rollover proposto.

Sejam os seguintes parâmetros para o estado hover dos links:

cor da letra: cinza (#666) em fundo claro (#FCFCFC);
decoração: links sem sublinhado;
borda de 1px em cor cinza (#666)
E as regras CSS:

Código:
.barNav a:hover {
color: #666;
background: #FCFCFC;
border: 1px solid #666;
}

O quatro estados dos links

Os links podem ter até 4 estados diferentes, refletindo cada um, uma ação diferente do usuário:

1) o estado "UP" (estado inicial, quando a página é carregada) já está estilizado;

2) o estado "OVER" é estilizado com a:hover também foi estilizado;

3) o estado "DOWN" é estilizado com a:active não foi tratado neste tutorial, propositadamente, ficando como exercício para você estudar;

4) o estado "VISITED" para links já visitados com a:visited, também não tratado neste tutorial, propositadamente, ficando como exercício para você estudar;

O código completo

A seguir o código completo de uma página contendo a barra de navegação estilizada conforme este tutorial para você copiar-colar e estudar, fazendo suas adaptações e mudanças.

Código:




[/font]Barra de Navegação
.barNav a {
font: 12px  Arial, Verdana,Helvetica,sans-serif;
color: #000;
text-decoration: none;
background:  #FFC50C;
text-align: center;
padding: 1px 5px;
margin-right:1px;
border: 1px solid #000;
}

.barNav a:hover {
color: #666;
background: #FCFCFC;
border: 1px solid #666;
}
-->

[font=Arial]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Home[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Quem somos[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Portfólio[/url]
[url=http://habbosal.forumeiros.com/caminho/arquivo.html]Contato[/url]
[/font][font=Arial]


O resultado final

A barra de navegação renderizada no navegador no estado em repouso - estado UP

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

A barra de navegação renderizada no navegador no estado com o mouse em cima do link "Quem somos" - estado OVER.

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]



Créditos : Srto.capitao e maujor
Fonte:
Imasters.com


Última edição por Fulan em Qui Mar 10 2011, 01:14, editado 1 vez(es) (Motivo da edição : Atualização.)
-Ghost!
-Ghost!
Membro Especial
Membro Especial
Mensagens Mensagens : 2378
Like Like : 58
Idade Idade : 26
https://habbosal.forumeiros.com

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Ter Jan 25 2011, 16:26
cara o post tá bom , mais você podia destacar o mais preciso , tipo dar uma destacada no que é mais preciso em cores e negrito ..

Mais fora isso tá bom ..

@Off
Po cara ja é a terceira conta que você cria , e começa a não seguir as regras esse post não é seu ele é dá

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

E não adianta a falar que eles copiaram de você por quê o post é de 2004 .!

+5 Warning pra você pois já sabia das regras .!
ShadowTheLord
ShadowTheLord
Membro de Honra
Membro de Honra
Mensagens Mensagens : 205
Like Like : 2
Idade Idade : 25
http://habbreat.webnode.com.br

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Ter Jan 25 2011, 16:43
cara da simplifica num intindi nada
-Ghost!
-Ghost!
Membro Especial
Membro Especial
Mensagens Mensagens : 2378
Like Like : 58
Idade Idade : 26
https://habbosal.forumeiros.com

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Ter Jan 25 2011, 17:15
Cara o post nem é dele , então não creio que ele vai concertar
jumpersman
jumpersman
Iniciante
Iniciante
Mensagens Mensagens : 3
Like Like : 0
Idade Idade : 43
http://ssssss.com.br

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Qua Jan 26 2011, 11:32
-SwordMaster! escreveu:cara o post tá bom , mais você podia destacar o mais preciso , tipo dar uma destacada no que é mais preciso em cores e negrito ..

Mais fora isso tá bom ..

@Off
Po cara ja é a terceira conta que você cria , e começa a não seguir as regras esse post não é seu ele é dá

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

E não adianta a falar que eles copiaram de você por quê o post é de 2004 .!

+5 Warning pra você pois já sabia das regras .!


Pode tirar essas ocorrências agora! eu puis os créditos de quem eu peguei TIRA AGORA VOCÊ ESTA ERRADO
EU PUIS OS CRÉDITOS DO maujor.com SOQUE NÃO PUIZ MAUJOR.COM E SIM MAUJOR , ADMINSTRADOR INCOPETENTE É DIFICIL
-Ghost!
-Ghost!
Membro Especial
Membro Especial
Mensagens Mensagens : 2378
Like Like : 58
Idade Idade : 26
https://habbosal.forumeiros.com

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Qua Jan 26 2011, 12:47
Aff cara sinceramente eu já to cansado desses inuteis , que vem pro fórum sómente pra arrumar confusão , ou que não seguem as regras e acham que estão em direito de chingar alguem -.-'

Na boa , a verdade é que o povo só tem respeito com o Fulan no fórum -.-' , e eu ja to cansado de tentar ajudar o fórum e o povo só vim pra falar merda ..

Porra errado to eu né ? , tu vem aqui poe os creditos a você por não fazer exatamente nada e eu to errado ?

Se você botasse

Creditos : Ao maujor pela criação e a mim por trazer a novidade .. estaria certo mais já que não botou nada !

Vai levar ocorrência , por estár sempre não seguindo as regras e + ocorrências por insulto -.-'
Fulan
Fulan
Administrador
Administrador
Mensagens Mensagens : 4523
Like Like : 207
Idade Idade : 30
http://www.habbosal.forumeiros.com

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Qui Mar 10 2011, 01:11
Tópico Na minha Opinião muito bom, porém, muito extenso, poderia colocar um spoiler aew para Diminuir e esqueceu da fonte do tópico.

Tópico Atualizado
Laxer
Laxer
Membro de Honra
Membro de Honra
Mensagens Mensagens : 163
Like Like : 8
Idade Idade : 31
https://habbosal.forumeiros.com

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Qui Mar 31 2011, 13:19
Tópico bloqueado.
Motivo: Confusão, mal organizado e plágio.
Conteúdo patrocinado

Construção de uma barra de navegação Empty Re: Construção de uma barra de navegação

Ir para o topo
Permissões neste sub-fórum
Não podes responder a tópicos