15/01/2013

Tutorial: Menu Rotate

||

Boa noite pipocas, trago mais um tutorial que irei usar no meu próximo layout. O menu e bem simples e perfeito para abaixo de uma imagem, como no "Welcome". Ele é bem pequeno e fofo, eu achei ele no Kawaii World. Para ver clique aqui.


Vá até seu HTML e procure por ]]></b:skin>. Acima dessa tag, cole o código que desejar abaixo:


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);}


Salve é vá ate seu layout, abra um gadget de HTML/JavaScript, e dentro cole código referente a cor que você escolheu anterior:

 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>

Prontinho agora é só salvar.

2 comentários:

  1. Ai ele e lindo, mas nao fico centralizado no meu tema.. T_T ai nem usei!

    ResponderExcluir
  2. Puxa é uma pena... experimenta usar margin para alinhar ele. Aqui tem um tutorial explicando melhor:

    http://www.bunnycrazy.net/2012/12/objeto-flutuante-colocar-menu-acima-do.html

    Deixe o top em 0px e mexa somente no left, aumente e diminuía até ficar ao seu gosto, se ainda assim não der experimente colocar o sinal de - na frente. Use o segundo código.

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram