Tutorial - Menu Slip

Meu deus hoje já é dia 20/12/2012!

Olá pessoal,como vão?Hoje como tutorial irei ensinar a vocês um efeito super bacana!Que se chama Menu Slip é um menu muito lindo!Que também é super útil!Gente mais antes,gostaria de falar que estou tendo poucos leitores,e queria muito que vocês divulgassem meu blog,quero muito ter um blog grande e famoso e como disse se alcançar a meta eu irei fazer um sorteio!Ok,vamos ao tutorial?

Não sabe que efeito é esse?Veja ele bem aqui

1. Faça as imagens que irá usar no programa de edição que preferir. Note que as imagens precisam ter uma palavra maior e um textinho menor que ficará escondido. Apronte tudo que irá usar e hospede. Precisaremos da medida em partes, portando, pegue a altura sem a parte do texto pequeno e a altura com tudo junto. Se não entendeu, é o seguinte:

Usaremos duas medidas: A altura somente da parte roxa, indicada pela linha verde e a altura da parte roxa e rosa (imagem toda) indicada pela linha preta. Entendem? É muito simples, já até tivemos um tutorial com o mesmo tipo de coisa.

2. Vá até Modelo > Editar HTML e procure por ]]></b:skin>. Acima dessa tag, cole o seguinte:

.sliphome {
float:left; width: 130px; height:44px; -webkit-transition-duration: .90s; background:url(linkdasuafoto) no-repeat;}
.sliphome:hover {height: 60px;}

Agora é a hora de substituir as medidas. No lugar de 130 você deve colocar o valor da largura da imagem, no lugar de 44 você deve colocar o valor da altura da parte "roxa" indicada no exemplo. Por fim, no lugar de 60 você deve colocar a altura de toda a imagem. Em linkdasuafoto, já sabe o que colocar.

3. Agora vem a parte mais fácil. Em um gadget de HTML/JavaScript, cole:

<a class="sliphome" href="seulinkaqui"></a>

Substitua e salve. Seu menu estará pronto. É claro que essa é só uma parte, para fazer as outras palavras você precisa repetir tudo e trocar "home" por outra coisa. Por exemplo: .sliphome, .slipfaq, .slipabout. Entendem? Boa sorte.