11/02/2012

Tutorial-Menu Oculto

                   
olá meus cupcakes!
Hoje vou ensinar um tuto super fácil que aprendi aqui ó:(Dany´s Place)
É um menu oculto super fofo,que quando você passa o mouse em cima aparece os links
Veja o Exemplo abaixo:
















Copie,e cole o código abaixo em um HTML/Java Script:

    <center>
<style type="text/css">
.img-opaco{
background: #E8E6E6;
color: #000;
width: 270px;
height: 210px;
margin-top:-215px;
opacity: 0;
-webkit-transition:all .5s ease-in-out; }
.img-opaco:hover{
opacity:.7
}
</style>


<img src="http://i111.photobucket.com/albums/n159/docedani/menuopaco/NEW.jpg" width="270" /> 

<div class="img-opaco"> 
<center> <span class="Apple-style-span" style="font-family: verdana, arial; font-size: medium; "><br>

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FF3E96;padding: 2px;border-radius:5px;border: #000000 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Home</a></span> 

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Parceiros</a></span> 

<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;"> 

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">Créditos</a></span>



<span id="nav" style="font-size: 13px; font-family: serif; background-color: #FFFFFF;padding: 2px;border-radius:5px;border: #FF3E96 1px dashed;-webkit-transition:1s;">

<a href="ENDEREÇO DO LINK" style="color:#000000; text-decoration: none; -webkit-transition-duration: 0.5s; ">F.A.Q</a></span> 

<font face="Purisa" size=2 color=#000000><b> <br><br>

Escreva aqui o seu texto

</b></font>
</span> </center> </div> </center>
Onde está em azul apague,e cole no lugar a URL da imagem que deseja.
Xau meus amores!
Comentem!

Um comentário:

  1. oi seu blog é um barato viu... mas naums ei oq signiefica : HTML/Java Script.. pf responde viu bjus

    ResponderExcluir

Olá,tudo bem?
Se comentar fique sabendo,que não me importo com:
"Segui de volta" ou etc.
Sou toda ouvido á duvidas e sugestões.
KIssus