2012/11/24

Menu Rotate


Oiiiie meus Laranjinhas,Gente trouxe um menu bem legal para vocês o tutorial original e do Html Strew 
e atualização do Kawaii World
vamos ao tutorial:

o menu:




1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole o código do modelo que escolheu.

Rosa

.menugirarosa {width:auto; float:left}

.menugirarosa a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fdcddc; margin-top:5px;box-shadow: inset 0 0 30px #f08cb9, 0 0 2px #dd6a9d; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}

.menugirarosa a:hover {-webkit-transform: rotateX(-360deg);}
 Azul
.menugiraazul {width:auto; float:left}

.menugiraazul a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#cde8fd; margin-top:5px;box-shadow: inset 0 0 30px #9ecdf1, 0 0 2px #7cb6e3; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}

.menugiraazul a:hover {-webkit-transform: rotateX(-360deg);}
 Amarelo


.menugira {width:auto; float:left}

.menugira a {width:46px; font-family:handy; font-size:8px; color:#ffffff; text-decoration:none; background-color:#fff9b1;box-shadow: inset 0 0 30px #d4cd82, 0 0 2px #cbc263; text-align:center; padding:5px; -webkit-transition-duration: 1s; float:left; margin-left:3px;}

.menugira a:hover {-webkit-transform: rotateX(-360deg);} 

2. Agora, em um gadget de HTML/JavaScript, cole o código referente a cor que escolheu:

 Rosa

<div class="menugirarosa">

<a href="LINK">nome</a>

<a href="LINK">nome</a>

<a href="LINK">nome</a>

<a href="LINK">nome</a>

</div>
Azul 

<div class="menugiraazul">

<a href="LINK">nome</a>

<a href="LINK">nome</a>

<a href="LINK">nome</a>

<a href="LINK">nome</a>

</div>
Amarelo 

<div class="menugira"><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a><a href="LINK">nome</a></div>

Nenhum comentário:

Postar um comentário