02/02/2013

Tutorial: Menu Giratório

||

Boa noite pessoal, venho trazer mais um menu hoje. Irei mostrar como colocar um menu giratório, achei o tutorial no Kawaii World então todos os créditos vai para lá. Gostei muito do menu, nunca usei ele... mas pretendo usar futuramente. Caso queira dar uma olhadinha aqui esta o menu. Gostou? Então vamos ao tutorial.

Em editar HTML, procure por ]]></b:skin> então acima dele coloque isso:

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


Personalize como desejar, agora vá ate seu layout e cole o código abaixo em um gadget de HTML/JavaScript:

<a href="SEULINK.COM"><div id="menu" onmouseover="this.innerHTML='NOMECOMMOUSE'"
onmouseout="this.innerHTML='SEMMOUSE'">SEMMOUSE</div></a> <br />

Basta arrumar os links e o nome e prontinho!

2 comentários:

  1. Amei esse menu,bem legal o efeito dele.
    Abraços!
    http://barbieseumundopink.blogspot.com.br/

    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