10/11/2012

Menu Suprise

                                          

Oi Amores, vou postar, um tutorial de um menu super fofo, e que eu recomendo,muito, o melhor não gasta quase nenhum espaço,vamos ao tuto? créditos ao tumblr: HTML UV prévia aqui


se copiarem dêêm os creditos.

1. vá em modelo,editar html/ctrl+f e na caixa de pesquise cole: ]]></b:skin> acima dessa tag cole:

/**************** Menu Surprise por Designs Factory/ready-to-l0ve **/ #menu{speak:normal; width:300px;} #menu .menu2 {opacity:0;-webkit-transition: all 1s ease-out;-moz-transition: all 1s ease-out;transition: all 1s ease-out;text-align:center;margin-left:-185px;} #menu:hover .menu2 {opacity:1; margin-left:0px;} .nav {background-color: transparent; display: inline-block; padding: 3px; text-align: center; color:#7A4959;margin:1px; font-family: '04b03'; font-size:8px; cursor: pointer; text-transform:uppercase; border-radius: 3px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;transition: all 0.5s linear;} .nav:hover {background: #646d93 ; color: #fff;} .nav1 {background-color: transparent; display: inline-block; padding: 3px; text-align: center; color:#7c87ad; margin:1px; font-family: '04b03'; font-size:8px; cursor: pointer; text-transform:uppercase;border-radius: 3px;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;transition: all 0.5s linear;} .nav1:hover {background: #7c87ad; color: #fff;}
2.agora vá em layout,adicionar um gadget,HTML/Javacript, e nele cole:


<div id="menu">
<div class="nav1">menu</div>
<span class="menu2">
<a href="Link"><div class="nav">Conteudo</div></a>
<a href="Link"><div class="nav">Conteudo</div></a>
<a href="Link"><div class="nav">Conteudo</div></a>
</div></span>


Um comentário:

  1. esse menu é espetacular!
    querosabertudo-k.blogspot.com

    ResponderExcluir