24 de outubro de 2012

Tutorial - Menu Hover


Yoo! Mim Ser Danny! E ser também a nova postadora! 
Vou postar Tutoriais Direto!
Hoje eu trouxe um tutorial de menu pra vocês.
Ele é hover, ou seja, ao passar o mouse muda de cor!
Você pode colocar em qualquer lugar do template.

1. Procure por ]]></b:skin> e acima da tag, cole:
.menugradiente {
background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/16-3.png');
display: inline-block;
text-align: center;
font-size:14px;
color: #ffffff;
text-shadow: 0 1px 3px #b2b2b2;
float: center;
margin: 2px;
font-family: verdana;
padding: 6px;
width: 100px;
height: auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-transition-duration: .50s;
}
.menugradiente:hover {
background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/17-2.png');
text-shadow: 0 1px 4px #737070;
-webkit-transition-duration: .60s;
}

- Entendendo o código:

background: url('http://i1234.photobucket.com/albums/ff411/SweetLG/16-3.png'); - No lugar da url coloque o seu background normal ou gradiente.

display: inline-block; - Troque inline por outline se quiser que o menu fique um link abaixo do outro e não lado a lado.

text-align: center; - Define o alinhamento do texto. Recomendo que deixe onde está, mas você pode trocar por right (direita) ou left (esquerda).

font-size:14px; - Tamanho da fonte. Quanto maior o número, maior ela fica e vice-versa.
color: #ffffff; - Cor da fonte.

text-shadow: 0 1px 3px #b2b2b2; - Cor da sombra.

float: center; - Alinhamento do menu. A mesma coisa do alinhamento do texto.

margin: 2px; - Espaço entre cada quadradinho do menu. Quanto maior o número, maior o espaço.

font-family: verdana; - Tipo da fonte. 

padding: 6px; - Espaço entre as letras e o fim do quadradinho. Se você aumentar, ele fica maior.

width: 100px; - Largura do quadradinho.

2. Cole isso onde você quiser que o menu apareça:
<a href="LINK" alt="­" ><div class="menugradiente">NOME DO LINK</div></a>
<a href="LINK2" alt="­" ><div class="menugradiente">NOME DO LINK 2</div></a>
<a href="LINK3" alt="­" ><div class="menugradiente">NOME DO LINK 3</div></a>

Na hora de analisar o código você pode ver que o hover nada mais é que um fundo.
Ou seja: 
Você pode colocar paletas normais também.

Bom,Eu recomendo usar  esse menu Na Barra de Gadgets! Mas Na Lateral ou No cabeçalho fica Lindo!!
Espero que tenha dado Certo! Beijos!

Um comentário:

Comentários como :
- Seguindo, segue de volta ?
- Assuntos nada a ver com o post
- Palavras vulgares ou obscenas
- Xingamentos, palavrões
- Críticas que não sejam construtivas
Comentários desse tipo não serão atendidos