17 de dez. de 2012

Menu Bounce

Bom dia!
Desculpem meu sumiço, estava sem internet, finalmente consegui resolver o problema.
Trouxe um menu para vocês chamado Menu Bounce, ele é do Tumblr, eu converti o código. Os créditos são do Tumblr HTMLuv♥  que é um Tumblr de HTML perfeito *-*
Vocês podem ver o preview no Tumblr clicando aqui.


Vá no seu HTML e procure por: /b:skin. Acima, cole:

#posiciona{position:absolute; margin-left: 100px; margin-top:10px; width:800px;}
.home{background: url('http://i.imgur.com/LhH4D.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.home:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
    40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}}
.ask{background: url('http://i.imgur.com/gsruL.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ask:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-30px);}
60% {-moz-transform: translateY(-15px);}
}
.about{background: url('http://i.imgur.com/B9wtB.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.about:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.ext{background: url('http://i.imgur.com/QIrEF.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:2px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.ext:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
@-o-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-30px);}
60% {-o-transform: translateY(-15px);}
}
.tem{background: url('http://i.imgur.com/x7I6e.png') ; display: inline-block; width: 107px; height: 48px; overflow: hidden; margin-right:1px; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}
.tem:hover{-webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s;}


A parte destacada lá em cima é a posição do menu, altere de acordo com seu blog. Baixe o PSD das imagens do menu aqui.

Depois disso, cole em um Gadget de HTML/JavaScript:


<div id="posiciona">
<a href="LINK AQUI" class="home"></a>
<a href="LINK AQUI" class="ask"></a>
<a href="LINK AQUI" class="about"></a>
<a href="LINK AQUI" class="ext"></a>
<a href="LINK AQUI" class="tem"></a>
</div>
Coloquei seus links no lugar de LINK AQUI, feito isso, seu menu está pronto ;)


Veja algumas imagens para esse menu clicando aqui.



9 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
    Respostas
    1. Tirei porque mudei a URL, se quiser refazer afiliação é só falar comigo ^^

      Excluir
    2. Ok...você já esta na minha elite com o URL atualizado..Pode me colocar de volta?
      URL : http://portal-encantado.blogspot.com.br/
      Nome : Portal Encantado

      Excluir
  2. Oi amor! Eu vi que vc me tirou dos Afiliados, eu queria te lembrar que eu faço parte do Sushi And Tea (provavelmente vc não vai se lembrar) mas como eu exclui ele, vc aceita afiliação no meu outro Blog? http://pequena-otome.blogspot.com.br/
    Se aceitar avisa?

    ResponderExcluir
    Respostas
    1. Ah e outra coisa... que efeito dos Marcadores vc usou? eu gostei muito, poderia me mandar o link do tutorial que vc usou? (sei que é pedir demais)

      Excluir
    2. Claro que eu me lembro, tirei porque não encontrei o blog mais. Aceito afiliação sim ^^

      O tutorial é esse: http://chacomanjos.blogspot.com.br/2012/10/personalizando-os-marcadores.html

      Beijos!

      Excluir
  3. Eu ja lhe adicionei nos Afiliados, pode me colocar tbm? http://pequena-otome.blogspot.com.br/

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!