Tutorial Css - Menu

[fsg 230]

Oii XTibianos, hoje vou postar um tutorial aqui sobre Menu HTML, vocês vão aprender como fazer vários tipos de Menu.

 

Construção de Menus:

 

CSS possibilita definir uma variedade infinita de layouts e efeitos para um menu de navegação. O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS:

 

Abordarei neste tutorial a construção de dois menus verticais e uma barra de navegação.

Numa visão inicial mostro o menu em ação e a seguir apresento a folha de estilo e a marcação do código que faz o menu funcionar.

Caso você resolva copiar e colar os códigos, use os mostrados no tutorial, pois o do código fonte está adaptado para não conflitar com as estilizações do site e não funcionarão como mostrado.

Bons estudos.

 

Os seletores de links:

 

São quatro os seletores dos links:

• a:link define o estilo do link no estado inicial;
  
• a:visited define o estilo do link visitado;
  
• a:hover define o estilo do link quando passa-se o mouse sobre ele;
  
• a:active define o estilo do link ativo (o que foi "clicado").

 

Menu #1

 

 

CSS do Menu:

 

<style type="text/css">
#menuver {
width: 11em;
padding: 0; 
margin: 0;
font: 12px Verdana, sans-serif;
background: #000; 
border-top: 3px solid red; 
border-bottom: 3px solid red; 
}
#menuver li {
list-style: none;
margin: 0.5em 0 0.5em 0.5em; 
}
#menuver li a {
margin:0; 
padding:0;
text-decoration:none;
color: #fff;
}
#menuver li a:visited {
color: #fff;
}
#menuver li a:hover { 
background: #fff;
color: #000; 
}
#menuver li a:active { 
background: #ccc;
color: #000; 
}
</style>

 

Código HTML do Menu

 

<ul id="menuver">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a href="#" title="Técnicas de layout com CSS"
>CSS Layout</a>
</li>
<li>
<a href="#" title="Técnicas de efeitos em links"
>CSS Links</a>
</li>
<li>
<a href="#" title="Construção de menus"
>CSS Menu</a>
</li>
<li>
<a href="#" title="CSS para impressão"
>CSS Print</a>
</li>
<li>
<a href="#" title="Importação de folhas de
estilo">CSS @import</a>
</li>
<li>
<a href="#" title="Fale conosco">Contato</a>
</li>
</ul>

 

Menu #2

 

 

Nos browsers citados no menu anterior todas as renderizações se mostraram iguais.

CSS do Menu

 

<style type="text/css">
#menubv {
width: 12em;
padding: 0;
margin: 0;
font: 14px Verdana, sans-serif;
}
#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}
#menubv li {
border-bottom: 1px solid #f00;
margin: 0;
}
#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight:bold;
border-left: 10px solid #ffc0cb;
border-right: 10px solid #fff5ee;
background-color: #ffe4e1;
color: #808000;
text-decoration: none;
}
#menubv li a:hover {
border-left: 10px solid #fcc;
border-right: 10px solid #fff;
background-color: #fff0f5;
color: #ccc;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menubv  li { float: left; height: 1%; }
* html ul#menubv  li a { height: 1%; }
/* End */
</style>

 

Código HTML do Menu

 

<div id="menubv">
...mesmo código do menu#1...
</ul>

 

Mais menu de navegação:

Clique aqui

Clique aqui

 

Barra de navegação

 

 

Nos browsers citados no menu#1 todas as renderizaçõos se mostraram iguais.

 

Nota: Retirei o link CSS @import deste exemplo para acomodar ao espaço disponível

 

CSS do Menu

 

<style type="text/css">
#menuhor {
border:none;
margin: 0;
font: 9px Arial, sans-serif;
}
#menuhor li {
list-style: none; 
margin: 0;
display: inline;
}
#menuhor li a {
height:1px; /* IE5.0 bug */
padding: 3px 1px; 
margin:0;
border: 1px solid #f00; 
background: #999;
text-decoration: none;
}
#menuhor li a:link {
color: #fff;
}
#menuhor li a:visited {
color: #fff;
}
#menuhor li a:hover {
background: #ccc;
color: #000; 
border-color: #000;
}
</style>

 

<div id="menubv">
...mesmo código do menu#1...
</ul>

 

Mais barras de navegação:

Clique aqui

Clique aqui

 

Fonte:

Clique aqui

 

Espero que gostem :smile_positivo:

Abraços.

Editado Dezembro 6, 2010 por FezZinN