BOA TARDE!!
Hoje vou ensinar a por um menu igual o nosso,é bem complicado pois tem um código pra cada quadrinho!
Ele é do kawaii world mais pra ficar mais fácil de encaixar ele na página de tutos vou por o nome de JUNTO E MISTURADO que é o nome desse design,ok?
Bom,se você ainda estiver curioso clique em leia mais...
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.
.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:
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!
AGORA vejam a imagem usada no nosso template passado para vocês usarem:
CRÉDITOS DE CÓDIGOS E IMAGENS PARA O MENU: KAWAII WORLD
eu achei bem facil ><
ResponderExcluir~Sam com preguiça de logar~
Pra mim e pra vc pode ser fácil,mais pra muita gente é difícil ficar colocando código por código e podem até se perder!
ResponderExcluirahhh é mt dificil e olha q sou ótima fazendo designs
ResponderExcluirÉ,a primeira vez que fiz passei sufoco,mais agora já ficou mais fácil!
Excluir