Novas postagens estão vindo, só que meu novo notebook tem teclado inglês, ou seja, sem acentos, e não quero fazer uma postagem ruim para vocês, então, vai demorar um pouquinho, já que vou ter que usar o computador de casa. Mas pelo menos eu estou de volta, hehe. :)

1 de dezembro de 2011

Tutorial - Fazer um menu hover

Bem, a pedido da Maitê do PinkCats, irei mostrar como fazer um menu hover, mas eu aprendi no Bomba de Glitter, então os créditos para a Sunny/Bia! O de fazer o efeito de menu já existe, é esse
Vá em Design >> Editar HTML >> Procure (Ctrl+F) por ]]></b:skin> >> Coloque acima dele o seguinte código:

/*---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 meu */
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---*/
Edite como manda (Cor, essas coisas), não apague nenhum código! 80 segundos é a transição entre as cores, o do PT é 80 segs, mas você pode variar. Agora, como fazemos o Menu? Para colocar na Sidebar, coloque:
<a href="Link"><bdg>Nome</bdg></a>
Pronto, se usar comente, se serviu, comente!
CRÉDITOS: BOMBA DE GLITTER 

0 chocolates-quentes derramados:

Postar um comentário

Regrinhas dos comentários:
-Pode divulgar seu blog, mas pelo menos conte o que achou da postagem.
-Deixe o link do seu blog/site para que possamos retribuir o comentário.
- Não são permitidos xingamentos e termos chulos.

Comente a vontade!

.