24.9.13

Tutorial - Menu Rotate

 

 

Demo (x)

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>

Salve e o seu menu estará pronto. Espero que todos tenham entendido de acordo com minha explicação

Creditos (x)

 

 

 

Nenhum comentário:

Postar um comentário

。 Ei carinha fofa >< seja gentil e não seja mal - - Educado :D
。 Cupcakes de morando deixe o link do seu blog eu visitarei
。 De sua opnião ,, mais se for muito mal eu não me aguentarei de raiva ...
。 Respondo todos os comentários rsrs... ... ... ...
。◕‿◕。 Hey... e obrigada pelo comentário use nossas carinhas

❣◕ ‿ ◕❣ ✿◕ ‿ ◕✿ ❀◕ ‿ ◕❀
❁◕ ‿ ◕❁ ✾◕ ‿ ◕✾ ◡‿◡✿
✿◠‿◠ ≧◔◡◔≦ ಥ_ಥ
≧�◡�≦ ≧^◡^≦ ≧✯◡✯≦
✿⍲◡⍲ ◕‿‿◕ ( ● ω ● )>(o゜ェ゜o)