Índice
TW Points : 
Mensajes : 
Reputación : 1
Hola amigos de Todo Webmaster.
Les traigo este aportaso.
se trata de un menú woody que podrás
editar a tu gusto.
Les dejo una Preview.
[Tienes que estar registrado y conectado para ver esa imagen]
Codigo css:
Codigo html :
Fuente :
[Tienes que estar registrado y conectado para ver este vínculo]
Les traigo este aportaso.
se trata de un menú woody que podrás
editar a tu gusto.
Les dejo una Preview.
[Tienes que estar registrado y conectado para ver esa imagen]
Codigo css:
- Código:
<style type"css">
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
width:700px;
background:url(http://img44.xooimage.com/files/c/e/5/menu_41_bg-16cc367.jpg) no-repeat;
height:55px;
}
#menu ul{
list-style:none;
text-align:center;
}
#menu li{
list-style:none;
display:block;
float:left;
padding:8px 30px 0 30px;
}
#menu li a{
display:block;
float:left;
}
#menu li a span{
display:none;
}
#menu li a:hover{
text-decoration:none;
}
#menu li a.home{
background:url(http://img40.xooimage.com/files/f/b/8/home-16cc2ba.jpg) no-repeat;
width:55px;
height:32px;
}
#menu li a:hover.home{
background:url(http://img28.xooimage.com/files/5/a/e/home_h-16cc2c4.jpg) no-repeat;
}
#menu li a.about{
background:url(http://img46.xooimage.com/files/f/2/6/about-16cc2d9.jpg) no-repeat;
width:82px;
height:32px;
}
#menu li a:hover.about{
background:url(http://img28.xooimage.com/files/5/a/e/about_h-16cc2f6.jpg) no-repeat;
}
#menu li a.services{
background:url(http://img46.xooimage.com/files/e/7/b/services-16cc302.jpg) no-repeat;
width:76px;
height:32px;
}
#menu li a:hover.services{
background:url(http://img28.xooimage.com/files/d/2/f/services_h-16cc310.jpg) no-repeat;
}
#menu li a.solutions{
background:url(http://img26.xooimage.com/files/9/a/f/solutions-16cc31d.jpg) no-repeat;
width:87px;
height:32px;
}
#menu li a:hover.solutions{
background:url(images/http://img28.xooimage.com/files/a/f/9/solutons_h-16cc328.jpg) no-repeat;
}
#menu li a.contact{
background:url(http://img44.xooimage.com/files/9/8/5/contact-16cc32b.jpg) no-repeat;
width:97px;
height:32px;
}
#menu li a:hover.contact{
background:url(http://img24.xooimage.com/files/d/4/5/contact_h-16cc33c.jpg) no-repeat;
}
#menu li a.homecurrent, #menu li a:hover.homecurrent{
background:url(http://img28.xooimage.com/files/5/a/e/home_h-16cc2c4.jpg) no-repeat;
width:55px;
height:32px;
}
</style>
Codigo html :
- Código:
<div id="menu">
<ul>
<li><a href="#" class="homecurrent"><span>home</span></a></li>
<li><a href="#" class="about"><span>about us</span></a></li>
<li><a href="#" class="services"><span>services</span></a></li>
<li><a href="#" class="solutions"><span>solutions</span></a></li>
<li><a href="#" class="contact"><span>contact us</span></a></li>
</ul>
</div>
Fuente :
[Tienes que estar registrado y conectado para ver este vínculo]
