Yo panquecas, como vão? Hoje venho postar o primeiro pedido que fizeram na minha Ask, sim finalmente eu fiz uma para o blog, tá eu não fiz, estava jogada ai peguei para o blog. Então irei mostrar como fazer o Menu Fade Image eu o uso aqui no blog, mas nunca postei o tutorial. Eu acho ele bem legal, porque ao mesmo tempo pode ser a imagem de welcome como também um menu. Os créditos vão para o blog da Yuizinha porque foi lá que eu achei o tutorial, mas os créditos também são do TMLuv! Então vamos lá?
Códigos
#aparece:hover #menu{
opacity:1;
}
#menu{
opacity: 0;
position:absolute;
-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:'04b03';font-size:8px;text-transform: uppercase;color:#ff699e;background: white; border-right:5px #D02090 solid; margin-bottom:1px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;}
#menu a:hover{border-right:0px #CCC solid;padding-right:6px;}
@font-face {font-family: '04b03';url(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf) format('woff');}
}
opacity:1;
}
#menu{
opacity: 0;
position:absolute;
-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out;
margin-top:-70px;
}
#menu a{
display: block;
padding-right:5px;
margin-left:15px;
padding:2px;
width:80px;text-align:right;font-family:'04b03';font-size:8px;text-transform: uppercase;color:#ff699e;background: white; border-right:5px #D02090 solid; margin-bottom:1px;-webkit-transition:all .3s linear;-moz-transition:all .3s linear;-ms-transition:all .3s linear;}
#menu a:hover{border-right:0px #CCC solid;padding-right:6px;}
@font-face {font-family: '04b03';url(http://static.tumblr.com/rozpbz7/j0dm2jpkp/04b_03__.ttf) format('woff');}
}
Galerinha nesse códio não precisa mudar praticamente nada, se quiser que o menu sobre a imagem sem que passe o mouse troque "opacity: 0;" por "opacity: 1;". Caso queira ele aparecendo deixe como esta. A cor da fonte está com esse código #ff699e. E fundo por white, já a borda por #fdd95b. Salve!
Códigos
<div id="aparece">
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/526361_452231948156550_1505989352_n.jpg" />
<div id="menu">
<a href="SEU LINK">home</a>
<a href="SEU LINK">about</a>
<a href="SEU LINK">goodies</a>
<a href="SEU LINK">credits</a>
</div></div>
<img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-ash3/526361_452231948156550_1505989352_n.jpg" />
<div id="menu">
<a href="SEU LINK">home</a>
<a href="SEU LINK">about</a>
<a href="SEU LINK">goodies</a>
<a href="SEU LINK">credits</a>
</div></div>
Prontin, gostaram? Espero que sim!
Amo esse menu u3u Ocupa menos espaço
ResponderExcluirna sidebar , pois envés de pôr um gadget para isso ,
já tem na imagem T-T' (embolado mais teu p entender né ?kkkk')
Gosto bastante , ótimo tuto!
Deu sim para entender, e concordo com você. E um otimo menu, gosto muito dele também e obrigada pela visita
ExcluirWendy você voltou?
ResponderExcluirOie Yu-chan eu ainda não fui, ainda estamos arrumando as coisas. ^^
ExcluirEsse tuto eu já conheço, e aprovo o/ hehehe...menu super cute, eu nunca usei mas tenho vontade >.< são tantos menus que na hora de fazer o lau eu acabo deixando esse de lado.
ResponderExcluirIvy-chan, somos duas eu tive que colcoar ele sem pensar porque sempre esqueço deele com tantas opções.
Excluirobrigada, o tuto me ajudou =))
ResponderExcluirkisses
Wendy, já tentei de tudo mas a imagem do menu sempre fica maior que o gadget. Como faço pra resolver? Já coloquei ela menor, já aumentei o gadget e nada resolveu D:
ResponderExcluirOi Ru, desculpe a demora para responder. Não tem como eu explicar por aqui porque os comentários não deixa enviar os códigos então vou enviar por bloco: https://sites.google.com/site/drwtexte/menudeabs/Tutu.txt
ExcluirÉ só salvar.
obrigada :3
Excluir