Peguei um Menu Hover no Google todo Bugado , as Imagens Tudo ja tinham sido deletadas ,
entao eu tirei os bugs e criei novas imagens irei estar postando um tutorial para colocar no blog
e o download as png e psd :D
Antes de ]]></b:skin> :
#menuimagem{
width:100px;
height:100px;
display:block;
position:absolute;
margin:399px 0 0 150px;
}
#home {
background:url(http://img16.imageshack.us/img16/6269/homeedz.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#home:hover {
background:url(http://img822.imageshack.us/img822/6388/homehoverw.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#HOME{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 20px;
}
#contato2 {
background:url(http://img19.imageshack.us/img19/1042/contatohover.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#contato2:hover {
background:url(http://img19.imageshack.us/img19/1042/contatohover.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#CONTATO2{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 200px;
}
#parceiros {
background:url(http://img402.imageshack.us/img402/2631/parceiross.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#parceiros:hover {
background:url(http://img600.imageshack.us/img600/493/parceiroshover.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#PARCEIROS{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 380px;
}
#pedidos {
background:url(http://img694.imageshack.us/img694/3673/pedidosjm.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#pedidos:hover {
background:url(http://img10.imageshack.us/img10/9739/pedidoshover.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#PEDIDOS{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 560px;
}
#equipe {
background:url(http://img205.imageshack.us/img205/2010/equipea.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#equipe:hover {
background:url(http://img38.imageshack.us/img38/7741/equipehover.png) no-repeat;
width:173px;
height:70px;
float:left;
}
#EQUIPE{
width:208px;
height:57px;
display:block;
position:absolute;
margin:-22px 0 0 741px;
}
Depois de <body> no lugar que quiser onde o menu fique coloque isto :
<div id='menuimagem'>
<div id='HOME'>
<a href='#' id='home' title='Volte Para a Pagina Inicial'/>
</div>
<div id='CONTATO2'>
<a href='#' id='contato2' title='Entre em Contato !'/>
</div>
<div id='PARCEIROS'>
<a href='#' id='parceiros' title='Seja um Parceiro !'/>
</div>
<div id='PEDIDOS'>
<a href='#' id='pedidos' title='Faça Aqui Seu Pedido !'/>
</div>
<div id='EQUIPE'>
<a href='#' id='equipe' title='Veja os Membros de Nosso Site!'/>
</div>
</div>
Baixe Tambem as PSD :
Servidor: 4Shared
Tamanho: 4,631 kB
Contém:
*PSD's + PNG's
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário