8 de dezembro de 2014

Menu Imagem Hover

Postado por Unknown Marcadores: , , , , ,

Vamos aprender mais um tutorial de menu?!



Resultado final será esse {xxxxxxx}


Gente, sou horrível para nomes, então fica esse mesmo, kk
Então, esse menu foi feito com base nos códigos de um menu do TTHY. Por isso, créditos a ela. É claro que modifiquei algumas coisas, e adicionei coisas minhas.
Vamos ao código.

Entre <style> e </style> você adiciona o código abaixo:

/***** Editado por Gallyack, com base no TTHY ****/
#menu{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/Z6ym4hc22/02.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu:hover{ background: url(http://static.tumblr.com/akjgncz/tQ5m4hc7n/m1.png); width: 300px; height: 60px; }
#menu span{display: none;}

#menu1{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/XSBm4hc3u/03.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu1:hover{ background: url(http://static.tumblr.com/akjgncz/sdFm4hce4/m06.png); width: 300px; height: 60px; }
#menu1 span{display: none;}

#menu2{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/r6Nm4hc1h/01.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu2:hover{ background: url(http://static.tumblr.com/akjgncz/8qkm4hccj/m04.png); width: 300px; height: 60px; }
#menu2 span{display: none;}

#menu3{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/Z6ym4hc22/02.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu3:hover{ background: url(http://static.tumblr.com/akjgncz/TFZm4hc9d/m02.png); width: 300px; height: 60px; }
#menu3 span{display: none;}

#menu4{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/r6Nm4hc1h/01.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu4:hover{ background: url(http://static.tumblr.com/akjgncz/TzDm4hcdg/m05.png); width: 300px; height: 60px; }
#menu4 span{display: none;}

#menu5{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/XSBm4hc3u/03.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu5:hover{ background: url(http://static.tumblr.com/akjgncz/7Som4hp3j/m07.png); width: 300px; height: 60px; }
#menu5 span{display: none;}

#menu6{overflow: hidden; background: url('http://static.tumblr.com/akjgncz/Z6ym4hc22/02.png') top left no-repeat; display: inline-block; width: 62px; height: 52px; -webkit-transition: all 0.9s ease; -moz-transition: all 0.9s ease; -o-transition: all 0.9s ease;}
#menu6:hover{ background: url(http://static.tumblr.com/akjgncz/9xtm4hcbt/m03.png); width: 300px; height: 60px; }
#menu6 span{display: none;}

Bom,será nesse código que você deve editar tudo o que precisa. O menu é feito por imagens, a normal e a hover. Nesse caso a normal é só o coração e a hover é o coração+nome.

Então, para cada div do menu você irá criar duas imagens, a normal e a hover. Ex:

Normal:





















Hover:





















No código acima também você edita o tamanho da largura e da altura, tanto da imagem normal, como da hover.



Agora veja bem... Se você quer o seu menu no topo, como no exemplo dado, adicione o seguinte código depois de <body>




<div align="center">
<table width="100%" align="center" cellpadding="0" cellspacing="0">
<td valign="top" style="display:block; background-image: url('http://static.tumblr.com/akjgncz/nVOm4hc76/top.png'); background-position: top left; background-repeat: false; padding-left:20px;padding-bottom:30px;padding-right:10px; padding-top:10px;text-align: right;">


<a href="/" id="menu"><span>Home</span></a>
<span onClick="document.getElementById('bloco-esquerdo').innerHTML=document.getElementById('leiame').innerHTML" id="menu1"><span>Home</span></span>
<span onClick="document.getElementById('bloco-esquerdo').innerHTML=document.getElementById('contato').innerHTML" id="menu2" ><span>Home</span></span>
<span onClick="document.getElementById('bloco-esquerdo').innerHTML=document.getElementById('tutos').innerHTML" id="menu3"><span>Home</span></span>
<span onClick="document.getElementById('bloco-esquerdo').innerHTML=document.getElementById('extras').innerHTML" id="menu4"><span>Home</span></span>
<span onClick="document.getElementById('bloco-esquerdo').innerHTML=document.getElementById('foryou').innerHTML" id="menu5" ><span>Home</span></span>
<a href="/tagged/themes" id="menu6"><span>Home</span></a>

</div></td></table>



No lugar de background-image: url (); você vai colocar a url da imagem que tu quer que fique no topo.

Caso tu não queira que ele fique no topo, você adiciona o código de a partir de "<a href="/" id="menu"><span>Home</span></a>" e cola no espaço onde quer que ela apareça.



Bom, o menu tá para iframe ou link normal, você edita conforme sua necessidade, lembrando que a principal ligação desses links ao style onde tem as imagens é o "id="menu" id="menu1" id="menu2"", etc...



Se quiser adicionar mais abas, cria mais uma div#menu no style.

Qualquer dúvida, venha me perguntar aqui nos comentários.






























2leep.com


















2
comentários
              :
            










































                    

                  










Assinar:

Postar comentários
                    (
                    Atom
                    )