Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Christian Herber

membro deste abril de 2008

Compartilhe e guarde

Enquete

Que tipo de conexão com a internet você utiliza?

Banda larga a cabo
3G
Via Rádio
Discada
Dedicado
Outra não especificada
Via Satélite

Home Código Fonte CSS Menus

Barras de navegação simples com CSS

Ao desenvolver uma página é necessário na maior parte dos caso do desenvolvimento de uma área de navegação para que o visitante possa acessar rapidamente as páginas do site.

Neste código é apresentada uma barras de navegação, na versão vertical e horizontal.
A barra é bem simples e bonita e que pode ser personalizada facilmente conforme o layout.

<html>
<head>
<title>Barras de Navegação CSS</title>

.::Barras na Horizontal::.

<style type="text/css">
.barNav a {
font: 12px  Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background:  #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}


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

-->
</style>

<body>
<p class="barNav">
<a href="seu_link.html" >Home</a>
<a href="seu_link.html">Jogos</a>
<a href="seu_link.html">Mural de Recados</a>
<a href="seu_link.html">Fotos</a>
<a href="seu_link.html">Vídeos</a>
<a href="seu_link.html">Eventos</a>
<a href="seu_link.html">Contato</a>
</p>


.::Barras na Vertical::.

<style type="text/css">
.barNav a {
font: 12px  Arial, Verdana,Helvetica,sans-serif;
color: #FFFFFF;
text-decoration: none;
background:   #6495ED;
text-align: center;
padding: 1px 5px;
margin-right: -1px;
border: 0px solid #000000;
}

</style>


<p class="barNav">
<a href="seu_link.html" >Home</a> <br>
<a href="seu_link.html">Jogos</a> <br>
<a href="seu_link.html">Mural de Recados</a> <br>
<a href="seu_link.html">Fotos</a> <br>
<a href="seu_link.html">Vídeos</a> <br>
<a href="seu_link.html">Eventos</a> <br>
<a href="seu_link.html">Contato</a> <br>
</p>

</body>
</html>

<html>
<head>
<title>Barras de Navegação CSS</title>

.::Barras na Horizontal::.

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

-->
</style>

<body>
<p class="barNav">
<a href="seu_link.html" >Home</a>
<a href="seu_link.html">Jogos</a>
<a href="seu_link.html">Mural de Recados</a>
<a href="seu_link.html">Fotos</a>
<a href="seu_link.html">Vídeos</a>
<a href="seu_link.html">Eventos</a>
<a href="seu_link.html">Contato</a>
</p>

.::Barras na Vertical::.

</style>

<p class="barNav">
<a href="seu_link.html" >Home</a> <br>
<a href="seu_link.html">Jogos</a> <br>
<a href="seu_link.html">Mural de Recados</a> <br>
<a href="seu_link.html">Fotos</a> <br>
<a href="seu_link.html">Vídeos</a> <br>
<a href="seu_link.html">Eventos</a> <br>
<a href="seu_link.html">Contato</a> <br>
</p>

</body>
</html>

Este código foi útil para você?

Nota	Comentário
10	denunciar danyell comentou em 26/11/2009 muito bom mesmo! só vou editar para combinar com as cores do site que estou criando!
9	denunciar gabi123456 comentou em 12/10/2009 Muito Bom Bem inteligente pois é bonito, simples então ele não é muito pesado para carregar. Na minha opinião é facil de fazer mas é moderno.
7	denunciar usertop comentou em 6/8/2009 booom Legal bem simplisinho e fazil de fazer sem mais delongas

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Christian Herber

Tags

Compartilhe e guarde

Enquete

Que tipo de conexão com a internet você utiliza?

Barras de navegação simples com CSS

muito bom mesmo!

Muito Bom

booom

Comente