sábado, 24 de novembro de 2012

Tutorial - Menu Surprise!


Bom diia leitoras *--*
Hoje eu estou muito feliz por faltar apenas uma seguidora para atingirmos os 60 seguidores! *Blog famosos não me humilhem* ASHASUA'
E já estou pensando na idéia de criar uma página no facebook e twitter para  blog, mas enfim é só uma idéia! Se vocês quiserem... por favor deem á opinião de vocês :3
Enfim, trouxe para vocês mais um tutorial cheiroso! É um menuzinho muito cute que eu achei lá no HTMluv!
Ele basicamente é uma palavra que quando passa o mouse aparece um menuzinho *--* É excelente para um sub-menu e para colocar suas redes sociais! Live preview.

Vamos ver?


 1º) Cole isto em acima de ]]></b:skin>
/*********** 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;}

O código é extenso! Mas nem precisa personaliza-lo tanto! Portanto ele é bem facinho ^-^

) Cole isto em um gadget de HTML/JavaScript:

<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>
 Facinho não? Ele é grande, mas fica uma graça e é super fácil!
Por enquanto é só, beijos e até mais.

7 comentários:

  1. Prontinho, conseguiu alcançar sua meta!' .. s2

    ResponderExcluir
  2. Oooooi (: Aceita aafiliaçãaao ? Da uma olhadinha la no meu blog (: : http://girl-unloved.blogspot.com/ Se gostaar e puder aceitaar meu pedido! Ps: Laay novo ta divoo ! Lindooo demais (:

    ResponderExcluir
    Respostas
    1. Oii c: Aceito sim ^-^ Seu blog é uma graça *----* Obrigada amre ^-^
      Já vou te por na afiliação ok? :3

      Excluir
  3. OMG OMG! Muiiiito obrigada mesmo! *o* Primeiro selinho do blog *OO* Emoção KKKK' :3
    Muito obrigada mesmo amre s2'

    Já já vou coloca-lo aqui *U*

    ResponderExcluir
  4. Aain adorei o menu flor ^^

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: