Yoo!
Vou ensinar a fazer o menu principal aqui do enjoy the html, aquele que fica acima da área de postagens. Ao passar o mouse, uma outra imagem sobe, tomando o lugar da antiga. Antes de tudo, lembrem-se de não deixar igualzinho ao meu. O conceito é o mesmo, mas você não precisa usar as mesmas cores, o mesmo formato e tamanho de botão, o mesmo tipo de fonte e coisas assim. Sejam criativos.
O menu tem um código para cada quadradinho, então ele é bem extenso. Ensinarei de apenas um e aí vocês repetem para criar o resto.
Enjoy ~
1. 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 o código:
.50s - Troque o 50 por um número maior para aumentar o tempo de transição de uma imagem para outra.
Link da imagem do botão - Exatamente o que diz.
130px - Largura.
40px - Altura.
2. Em um gadget de HTML/JavaScript, cole:
<div id="menu">
<a href="SEU LINK" class="home"></a>
</div>
Este é o código de apenas um botão, para adicionar outros você repete tudo, fazendo as alterações a seguir:
Vamos supor que você vá fazer agora um botão de faq. Repita tudo e troque todas as palavras HOME do passo 1 por faq, como deseja.
Repita o '<a href="SEU LINK" class="home"></a>' ainda dentro da div, trocando home por faq, assim:
<div id="menu">
<a href="SEU LINK" class="home"></a>
<a href="SEU LINK" class="faq"></a>
</div>
Espero que tenham compreendido!
Nenhum comentário:
Postar um comentário