4

Menu Splasher

28 abril 2013
Hi amores!
Hoje vim trazer para vocês um menu que tem um efeito lindo para vocês! O menu splasher é aquele que quando você passa o mouse ele da um pequeno giro e aparece o nome do link para baixo. clique aqui para ver.
Queria pedir, para que todos que estiverem vendo isto, seguirem o blog, para ajudar em minha meta, obrigada.
Vá em Modelo - Editar html - Ctrl+F e pesquise por: ]]></b:skin> e cole o código abaixo:
/***Menu Simone(cerejadosundae)**/
 .navsm{float:left; overflow: hidden;background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#fff));display: inline-block; padding: 2px; text-align: center; color:#aaa;margin:1px; line-height:40px;height:40px;width:40px;font-size: 10px;font-family: 'Play', sans-serif; -webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;transition: all 0.5s linear;border-radius:100px; border: 1px solid #d6d6d6;}
.navsm:hover {height:56px;background:#eee;color:#aaa;}
.navsm img{width:18px;margin-top:10px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; }
.navsm:hover img{-webkit-transform: rotate(360deg); }
Modifique as cores e tamanhos do seu menu. Quando estiver tudo pronto vá em um gadget HTML/JavaScript e cole:
<a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/home.png"><br>Home</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/mail_2.png"><br>ask</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/delete.png"><br>Dash</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/photo.png"><br>Fotos</div></a>
Ponha os links e substitua os icons se desejar. Espero que tenham gostado!
Créditos no menu. Esse menu serve mais para tumblr ok?
xoxo

4 comentários:

  1. LOL, sua linda, vou usar, ú.u UHAAHUS', adorei, já adicionei aos favoritos, pois vou utilizá-lo no meu próximo layout e_e' Adorei, muito fofo!!

    -4 Seconds.

    ResponderExcluir
  2. Achei o efeito lindo!
    Cherry Crazy~

    ResponderExcluir

© Jully Monike - 2016. Todos os direitos reservados.
Criado por: Jully Garcia.
Tecnologia do Blogger.
imagem-logo