12 de set de 2013

Menu que gira

Trago para vocês um menu que achei interessante, o menu que gira fica fofo ao lado
da sidebar. Para ver o menu que gira clique aqui

Para colocar este menu em seu blog copie o código abaixo e cole antes
da tag ]]></b:skin> 

#menu
{background: #ffc0c0;
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 #ff8080;
-webkit-box-shadow: inset 0 0 0px 8px #ff8080;
box-shadow: inset 0 0 0px 8px #ff8080;
-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 #67A9BF;
-webkit-box-shadow: inset 0 0 0px 38px #67A9BF;
box-shadow: inset 0 0 0px 38px #67A9BF;
-webkit-transform: rotate(360deg) scale(1.1) skew(1deg) translate(0px);
}

background: #ffc0c0; - 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 #67A9BF;
-webkit-box-shadow: inset 0 0 0px 38px #67A9BF;
box-shadow: inset 0 0 0px 38px #67A9BF;

Estes códigos referem-se a cor do menu quando o mouse está em cima.

Para fazer o menu funcionar copie o código abaixo e cole no gadget html/java script

<div style="position: absolute; margin-top: -40px; left: 250px;">
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='01'">01</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='02'">02</div></a> <br />
<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOME'"onmouseout="this.innerHTML='03'">03</div></a> <br /></div>

Onde está SEULINK.COM você deve colocar o link das páginas destinadas.
Onde está NOME 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.


Nenhum comentário :

Postar um comentário

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo