28/12/2012

TUTORIAL-menu igual o do blog

                   
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.
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!



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



4 comentários:

  1. eu achei bem facil ><

    ~Sam com preguiça de logar~

    ResponderExcluir
  2. 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!

    ResponderExcluir
  3. ahhh é mt dificil e olha q sou ótima fazendo designs

    ResponderExcluir
    Respostas
    1. É,a primeira vez que fiz passei sufoco,mais agora já ficou mais fácil!

      Excluir