Estilos Para Menu HTML/Css

 
Foto: [favim.com]

Oie galera! Resolvi postar aqui alguns modelos de menu bem legais para vocês. Tudo devidamente creditado hein! 

Modelo de Menu 1 por Other Things:



Veja como fica:




Vá em Editar HTML e procure por: ]]></b:skin>

Cole este código logo acima dessa tag:

/*** menu tutoriaisattitudeincluded.blogspot.com ***/
.menuattitude {
background-color: #cccccc; /*** cor do fundo ***/
float:left;
font-family:Courier;
color:#333333; /*** cor da fonte ***/
font-size: 10pt; /*** tamanho da fonte ***/
width:158px; /*** largura ***/
text-align: center; /*** posicionamento ***/
margin: 3px;
line-height:25px;
margin-bottom: 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menuattitude:hover {
background-color: #666666; /*** cor do fundo ***/
font-family: Courier; /*** Fonte ***/
color: #b779ff; /*** cor da fonte ***/
float:left; /*** posição do texto ***/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

}

Retire o que está em roxo, caso não queira as bordas arredondadas. Ok? Salve.

Agora adicione um Gadget de HTML/JavaScript com esse código:

<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>
<div class="menuattitude"><a href="LINK_DA_SUA_PÁGINA">TÍTULO_DA_PÁGINA</a></div>

Edite o código com suas páginas. Salve e arraste o gadget para CIMA do seu cabeçalho. Certo? Salve tudo e visualize ;D

Modelo de Menu 2 por Bomba De Glitter:

EXEMPLOEXEMPLO EXEMPLO EXEMPLO EXEMPLO


Vá em Editar HTML e procure por:  ]]></b:skin>

Cole este código logo acima dessa tag:

/*---Início do Menu com Efeito by Bomba de Glitter---*/
bdg {
font-family: tahoma; /* Fonte do Menu */
width: 17%; /* Tamanho do Menu */
float: left;
background:#8EE5EE; /* Cor do fundo do Menu */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 9px 0px 9px 0px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao exemplo */
font-size: 08pt; /* Tamanho da fonte */
color: #fff; /* Cor da fonte */
}
bdg:hover {
font-family: tahoma; /* Fonte do Menu quando passa o mouse */
width: 17%; /* Tamanho do Menu quando passa o mouse */
float: left;
background:#FF69B4; /* Cor do fundo do Menu quando passa o mouse */
padding: 5px;
text-align: center;
margin: 2px;
-webkit-border-radius: 0px 9px 0px 9px; /* Pontinhas da Borda - não modifique se quiser o formato igual ao meu */
-webkit-transition-duration: .80s; /* Duração do Efeito - não modifique se quiser o efeito igual ao meu */
font-size: 08pt; /* Tamanho da fonte do Menu quando passa o mouse */
color: #fff; /* Cor da fonte do Menu quando passa o mouse */
}
/*---Fim do Menu com Efeito by Bomba de Glitter---*/ 

Salve. Agora adicione um gadget HTML/JavaScript e cole este código:

<a href="LINK_DA_SUA_PÁGINA"><bdg>TÍTULO_DA_PÁGINA</bdg></a>

Use esse código para quantas páginas quiser. ;D

Gostaram? Espero que sim ;D