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>