Tutorial Menu Hover Igual GUSTAVOPROJETOS

Olá Tuurminha querida ! bem vim logo posta um tutorial de como coloca o menu igual o template v1.0 GUSTAVOPROJETOS (HOVER).

Bora la então.


Primeiro Passo :  Pressione o Botão CTRL+F no seu navegador
Segundo Passo :  Procure a Palavra /* Headings.
Terceiro Passo :  Acima desse Comando Cole esse Codigo

/*-----Menu Imagem Gustavo Projetos-----*/
#menuimagem{
width:100px;
height:100px;
display:block;
position:absolute;
margin:399px 0 0 150px;
}
#home {
background:url(http://img254.imageshack.us/img254/5805/50880627.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#home:hover {
background:url(http://img4.imageshack.us/img4/7354/80577097.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#HOME{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-388px 0 0 530px;
}
#contato2 {
background:url(http://img803.imageshack.us/img803/8484/47954023.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#contato2:hover {
background:url(http://img228.imageshack.us/img228/6369/60151738.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#CONTATO2{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-388px 0 0 700px;
}
#parceria {
background:url(http://img844.imageshack.us/img844/4985/62770564.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#parceria:hover {
background:url(http://img194.imageshack.us/img194/1268/44571632.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#PARCERIA{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-388px 0 0 830px;
}


Quarto Passo :  Pressione CTRL+F e Pesquise a Palavra    <body>
Quinto Passo :  Abaixo Desse comando Adicione esse Codigo

<div id='menuimagem'>
<div id='HOME'>
<a href='#' id='home' title='Volte Para a Pagina Inicial'/>
</div>
<div id='CONTATO2'>
<a href='SEUEMAILAQUI' id='contato2' title='Entre em Contato !'/>
</div>
<div id='PARCERIA'>
<a href='SEULINKAQUI' id='parceria' title='Obtenha Sua Compra !'/>
</div>
</div>


e Pronto Agora Edite os Links e as Imagens e Vira Menu "Hover"

0 comentários:

Postar um comentário