23 agosto 2012

Menu Changing


Oii fofitos! Tudo boom? Hoje eu trouxe um menu muito perfeito que eu usei no Lay Free (vai ser postado dia 29/08) ele é assim:

Para cada item você vai ter que adicionar um código acima de ]]>
(eu usei menu1,menu2,menu3 etc), eu vou postar só o code do primeiro, look:

#menu1 {
background: #FF63A6; /* fundo */
position: absolute; /* não mexe com a página */
width: 120px; /* largura */
padding: 2px; /* espaçamento interno */
text-align: center;  /* alinhamento do texto */
z-index: 3; /* não ficar em cima do outro (não mude) */
float: left; /* posição (esquerda, right=direita) */
display: block; /* faz com que seja um bloco (não mude) */
letter-spacing: 1px; /* espaçamento entre as letras */
margin-top: -120px; /* quanto mais pra cima */
margin-left: 20px; /* quanto mais para a esquerda */
font-size: 12px; /* tamanho da fonte */
font-family: 'Homenaje', sans-serif; /* fonte */
-webkit-transition: all 0.6s ease-out; /* duração da transição  */
-moz-transition: all 0.6s ease-out; /* duração da transição */
transform: rotateX(0deg); /* transição virar (não mude ou perde o efeito) */
-webkit-transform: rotateX(0deg);  /* transição virar (não mude ou perde o efeito) */
-moz-transform: rotateX(0deg); /* transição virar (não mude ou perde o efeito) */
}
#menu1:hover {
-webkit-transition: all 0.6s ease-out; /* duração da transição */
-moz-transition: all 0.6s ease-out; /* duração da transição */
transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
-webkit-transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
-moz-transform: rotateX(160deg); /* transição virar (não mude ou perde o efeito) */
text-align: center; /* alinhamento do texto */
}


Para cada item você terá que colocar um código, mas vai precisar alterar os valores que estão em rosa.
Lembrando que o margin-top (ou qualquer margin) se refere a distância externa, então quanto menor for o valor maior vai ser a distância. Por exemplo o valor -100 vai deixar a imagem mais para cima que o valor -50. 
Para usar coloque esse código num gadget de HTML/JavaScript:
Pode adicionar mais itens, mas lembre-se que terá que adicionar mais um código e mudar o número do "menu1" 
Essa fonte não tem instalada no blogger, é uma fonte do Google Web Fonts, o próximo tutorial vou ensinar a usar essas fontes diferentes!
Obs: Esse menu fica mais divo quando se usa no cabeçalho, mas para colocar você terá que colocar o cabeçalho pelo HTML (tem aqui)
Kiss&Kiss

3 comentários:

Letícia disse...

amei o menu <3 acho que vou usar no meu próximo lay !
amei seu blog , seguindo .

livein-paris . blogspot. com (novo nome, pode dar uma olhada e seguir se gostar ?)

Rafa-chan disse...

Nossa, que menu lindooo, com certeza irei usar.
Seu Blog é lindo amore, estou seguindo. Beijos.

Sonho desenhado ---> (Clique no meu Perfil para visitar o Blog)

Unknown disse...

eu não entendi nada, é pra colocar esse primeiro código aonde?