[Pedido] Menu Bounce + Imagens para o menu

Olá cogumelos adocicados com chocolate de arco íris!

Bem, primeiro quero agradecer à vocês, porque o número de comentários aqui no blog vem aumentando, bem, no nosso primeiro post desde que abrimos o blog, temos 63 comentários, e isso me deixa bem alegre, queria também avisar que agora temos uma ask no blog, para vocês pedirem as postagens, antes vocês pediam pelo formulário, mais agora temos uma ask, o que facilita de ver as mensagens, clique aqui e peça a sua.

Queria avisar também que eu e a Hannah acabamos de concluir o chocomapa, ou seja, a página com todos nossos posts (tutoriais, goodies e etc..) já está totalmente completa, clique aqui para vê-la.

Hoje trouxe um tutorial pedido pela Amanda, dona do blog Nerds Feras de como fazer o menu que usamos no layout passado, conhecido como menu bounce.

Preview // Créditos totais do menu para Great Help <<

Cole antes de ]]></b:skin>:

#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;}

Calma, o código é enorme assim, mais as únicas coisas a serem personalizadas são as imagens que estão em negrito.

Está vendo a parte roxa do código? aí que vocês irão personalizar para posicionar o menu em seu layout.

Cole isso em um HTML / Javascript:

<div id="posiciona"><a href="link" class="home"></a><a href="link" class="ask"></a><a href="link" class="about"></a><a href="link" class="ext"></a><a href="link" class="tem"></a></div>

E aqui como prometido no título do post, imagens para o menu:

Espero que tenham gostado do tutorial de hoje, relembrando, créditos totais do menu para o www

Beijos de caramelo!