dicashot
Gata da vez
(+18)
DicasHot
HBO MOVIES ONLINE
TV
dicashot
Cartoon Network PT
TV
dicashot
ANI ROCHA NO FUNK
DANÇANDO MUITO



Menu CSS Animado


Nesta postagem compartilho com vocês este menu animado bem criativo.








Para colocar em seu blog...

Entre em "Layout" - "Adicionar um Gadget" - "HTML/JavaScript" e cole o seguinte código

<style>
#fbt-nav {margin:0 auto;list-style: none;width: 965px;height: 86px;overflow-y: hidden;}
#fbt-nav li {float: left;}
#fbt-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;}
#fbt-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#fbt-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#fbt-nav li a:hover {cursor: pointer;}
#fbt-nav li a:hover img {top: -85px;}
#fbt-nav li a:hover .aname {top: 85px;}
#fbt-nav li:nth-child(1) a {background:#000000;border-radius: 5px 0 0 5px;}
#fbt-nav li:nth-child(2) a {background:#808080;}
#fbt-nav li:nth-child(3) a {background:#2F4F4F;}
#fbt-nav li:nth-child(4) a {background:#000000;}
#fbt-nav li:nth-child(5) a {background:#808080;}
#fbt-nav li:nth-child(6) a {background:#2F4F4F;}
#fbt-nav li:nth-child(7) a {background:#000000;}
#fbt-nav li:nth-child(8) a {background:#808080;border-radius: 0 5px 5px 0;} 
</style> 
 
<div id="fbt-nav">
<li> <a href="/"><span class="aname">Início</span> <img src="http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/32/blue-home-icon.png" /> </a> </li>
 
<li> <a href="#"> <span class="aname">Downloads</span> <img src="http://icons.iconarchive.com/icons/treetog/i/32/Folder-Downloads-icon.png" /> </a> </li>
 
<li> <a href="#"> <span class="aname">Índice</span> <img src="http://icons.iconarchive.com/icons/ariil/alphabet/32/Letter-P-icon.png" /> </a> </li>
 
<li> <a href="#"> <span class="aname">Parceria</span> <img src="http://icons.iconarchive.com/icons/antialiasfactory/jewelry/48/Partnership-icon.png" /> </a> </li>
 
<li> <a href="#"><span class="aname">Sugestão</span> <img src="http://icons.iconarchive.com/icons/designcontest/ecommerce-business/48/idea-icon.png" /> </a> </li>
 
<li> <a href="#"><span class="aname">Contato</span> <img src="http://icons.iconarchive.com/icons/hopstarter/soft-scraps/32/User-Chat-icon.png" /> </a> </li>
 
<li> <a href="#"><span class="aname">Anuncie</span> <img src="http://icons.iconarchive.com/icons/aroche/delta/48/Speaker-icon.png" /> </a> </li>
 
<li> <a href="#"> <span class="aname">Sobre</span> <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-help-about-icon.png" /> </a> </li>
</div>

destacado de azul corresponde ao link do botão; e as partes destacadas de vermelho corresponde ao nome do botão.

Tendo colado o código, basta salvar e pronto!!!


Cursos On-line 24 Horas - Educação a Distância de Qualidade
Menu CSS Animado Menu CSS Animado Reviewed by Muca on 5/16/2014 08:16:00 PM Rating: 5