Como colocar menu animado (Tutorial)

Menu Animado I

visualize aqui

#links {position:absolute; overflow:hidden; top:10px; left:10px;}

#links {position:absolute; overflow:hidden;}

#links a {display:block; float:left; background:#D4DA67; color:#fff; padding:10px 25px 10px 25px; margin-left:7px; font-family:arial; font-size:18px; font-weight:bold; text-transform:uppercase; text-shadow:1px 1px #000; -moz-transition-duration:0.8s; -webkit-transition-duration:0.8s;}

#links a:hover {background:#95A03B; color:#fff; font-weight:bold; text-transform:uppercase;}

 Menu Animado II

Visualize aqui

#links

{position:absolute;

overflow:hidden;

top:10px;

left:10px;}

#links a

{display:block;

float:left;

width:90px;

background: #cor_do_background;

font-family: trebuchet ms;

font-size: 11px;

margin: 1px;

color: #cor_da_fonte;

display: block;

-moz-box-shadow: inset 3px 0 0px 0 #cor_da_borda;

-webkit-box-shadow: inset 3px 0 0px 0 #cor_da_borda;

box-shadow: inset 3px 0 0px 0 #cor_da_borda;

padding: 5px 5px 3px 6px;

-moz-transition: all 0.4s ease-out;

-webkit-transition: all 0.8s ease-out;

-o-transition: all 0.8s ease-out;

-ms-transition: all 0.8s ease-out;

transition: all 0.8s ease-out;}

#links a:hover;

{-moz-box-shadow: inset 550px 0 0px 0 #cor_da_sombra_hover;

-webkit-box-shadow: inset 550px 0 0px 0 #cor_da_sombra_hover;

box-shadow: inset 550px 0 0px 0 #cor_da_sombra_hover;

color: #cor_da_fonte_hover;}

 Como fazer:

1. Procure por (aperte F2 ou CTRL+F) ]]></b:skin>.

2. Imediatamente acima, coloque o código do menu escolhido.

3. Estão vendo o top:10px e o left:10px bem no início do código? É isso que vai definir onde o menu vai ficar posicionado. Mude o 10 de acordo com a sua necessidade.

4. Mude agora as cores, fontes, tamanhos etc. Fica bem fácil mudar as cores.
Atenção: Não mude absolutamente nada além das cores se não souber mexer com HTML.

5. Procure por </body> e logo acima cole o seguinte código:

<div id="links">

<a href="http://www.blogger.com/link">nome</a>

<a href="http://www.blogger.com/link">nome</a>

<a href="http://www.blogger.com/link">nome</a>

<a href="http://www.blogger.com/link">nome</a>

<a href="http://www.blogger.com/link">nome</a>

<a href="http://www.blogger.com/link">nome</a>

</div>

 Adicione ou retire links de acordo com sua necessidade.

Tutorial por: Art designs encomendas.