Menu que gira.

Esqueci de abrir o blog de preview kkk, agora podem ver o menu

Oi gente! Como vão? Espero que bem. 

Feliz 2013! Tenham muita paz, saúde, felicidades, e tudo que há de bom. Não tive como postar um texto, como muitos blogs, pois não sabia o que falar ahaha. Mas espero que esse ano seja muito melhor, tão quanto 2012 que passou.

Hoje trago para vocês um tutorial, de menu que gira. Acho ele bem bonito e já  até usei num layout daqui, que não ficou muito tempo. Todos os créditos do menu ao blog Kawaii World.

 Tenha uma prévia aqui.

 O menu é o que está ao lado do cabeçalho.

Se gostou e quer saber como fazer continue lendo!

Primeiramente dê um CTRL F e procure por ]]></b:skin> 

 Depois de achar o código cole acima dele o seguinte:

#menu
{background: #ffa1be;
color: #ffffff;
font: normal 20px Capriola;
text-shadow:0 1px #ccc;
width: 70px;
height: 50px;
display: inline-block;
padding: 25px 5px 5px 5px;
margin: 5px;
margin-right: 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
text-align: center;
-moz-box-shadow: inset 0 0 0px 8px #ea649a;
-webkit-box-shadow: inset 0 0 0px 8px #ea649a;
box-shadow: inset 0 0 0px 8px #ea649a;
-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;}
#menu:hover
{opacity: .80;
-moz-box-shadow: inset 0 0 0px 38px #7dd3ef;
-webkit-box-shadow: inset 0 0 0px 38px #7dd3ef;
box-shadow: inset 0 0 0px 38px #7dd3ef;
-webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);}

---------------------------------------------------

Entendendo.
---------------------------------------------------

background: #ffa1be; 

Este código é referente a cor do fundo do menu.
------------------------------------------------------
font: normal 20px Capriola;

Este código é referente ao tamanho e a fonte do menu
----------------------------------------------------------
text-shadow:0 1px #ccc;

Este código é referente a sombra da fonte
--------------------------------------------------------
-moz-box-shadow: inset 0 0 0px 38px #7dd3ef;
-webkit-box-shadow: inset 0 0 0px 38px #7dd3ef;
box-shadow: inset 0 0 0px 38px #7dd3ef;

Estes códigos referem-se a cor do menu quando o mouse está em cima.
--------------------------------------------------------------------------
Agora abra um gadget\JavaScript e cole o seguinte:

 <a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='Home'"onmouseout="this.innerHTML='01'">01</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='Faq'"onmouseout="this.innerHTML='02'">02</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='4YOU'"onmouseout="this.innerHTML='02'">02</div></a> <br />

Onde está SEULINK.COM você deve colocar o link das páginas destinadas.
Onde está Home, Faq, 4YOU, são os nomes das páginas em Hover (com o mouse em cima).
Onde estão os números, são os nomes normal, sem o mouse em cima.

Se quiserem posicionar o menu em qualquer lugar do cabeçalho veja esse tutorial aqui.

Beijos!!!