Tutorial - Menu Rolling

 

Bom dia, pessoal.

 

Bem, vocês já devem ter percebido que esse é um novo blog; eu, Lary, prometo trazer coisas bem interessantes para vocês. Espero que vocês se contentem com o que eu poste, tentarei fazer o melhor para agradar vocês. Trarei tutoriais para o seu blog, goodies com Photoshop, Photofiltre e Photoscape, e outras coisinhas básicas.

 

Enfim, voltando ao assunto do post, trouxe um tutorial de um menu bem legal, é o que eu uso aqui no blog, que eu dei o nome dele de Rolling. Eu aprendi a fazê-lo lá no Kawaii World, então créditos a Kaorii. É um menu bem fofo, em que, ao passar o mouse, a imagem sobe, tomando o lugar da antiga. O código é bem extenso, tem um código para cada quadradinho.

 

Enjoy ~

1. Vá no seu HTML, procure por ]]></b:skin>, e, acima da tag, cole:

 

#menu a.home{
-webkit-transition-duration: .50s;
background: url(LINK DA IMAGEM DO BOTÃO)no-repeat; overflow: hidden;
width: 130px;
height: 40px;
display: inline-block;
}
#menu a.home:hover{
background-position: 0-40px;
}
 

Entendendo:

 

.50s - Tempo da transição de uma imagem para outra. Aumente para esse tempo ser maior e diminua para ser menor.

Link da imagem do botão - Como já diz, é a url da sua imagem.

130px - Largura.

40px - Altura.

 

2. Em um gadget de HTML/Java Script, cole:

 

<div id="menu">
<a href="SEU LINK" class="home"></a>
</div>
 

 Este código refere-se somente ao botão de Home, para outras páginas, você tem que repetir tudo, como no exemplo a seguir.

 

Suponhamos que você queira fazer um botão de Shame. Você tem que repetir tudo o que você fez no passo 1, com o HOME, trocando por SHAME, ou por outro como você deseja.

 

Agora, de volta ao gadget de HTML/JavaScript, você repete o '<a href="SEU LINK" class="home"></a>', trocando "home", por "shame", como no exemplo:

 

<div id="menu">
<a href="SEU LINK" class="home"></a>
<a href="SEU LINK" class="shame"></a>
</div>
 

Espero que tenham entendido, créditos totais ao Kawaii World. Beijos. ;*