http://mimenu.webcindario.com/
como pueden ver el menu funciona pero quiero que la imagen cambie lentamente al pasarle el puntero ensima!!!
es decir quiero que el efecto quede como este menu que encontre en google:
http://www.shopdev.co.uk/blog/menuDemo.html
Mi codigo en Index.html es este:
Cita:
Como quedaria mi codigo incluyendo la libreria de Jquery y el codigo del efecto!!! gracias amigos <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
ul#menu{
margin:auto;
list-style-type:none;
background:url(img/bgnav.jpg);
height:42px;
width:974px;
}
#menu li {
text-align:center;
font-size:105%;
float:left;
width:132px;
height:42px;
text-align:center;
line-height:40px;
}
#menu li:hover{
background:url(img/nacvinactivo.jpg);
}
#menu li.activa {
background:url(img/nacvactivo.jpg);
}
</style>
</head>
<body>
<ul id="menu">
<li class="activa"><a href="index.html">Inicio</a></li>
<li><a href="post.html">Posts</a></li>
<li><a href="tutoriales.html">Tutoriales</a></li>
<li><a href="registrate.html">Registrarse</a></li>
</ul>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
ul#menu{
margin:auto;
list-style-type:none;
background:url(img/bgnav.jpg);
height:42px;
width:974px;
}
#menu li {
text-align:center;
font-size:105%;
float:left;
width:132px;
height:42px;
text-align:center;
line-height:40px;
}
#menu li:hover{
background:url(img/nacvinactivo.jpg);
}
#menu li.activa {
background:url(img/nacvactivo.jpg);
}
</style>
</head>
<body>
<ul id="menu">
<li class="activa"><a href="index.html">Inicio</a></li>
<li><a href="post.html">Posts</a></li>
<li><a href="tutoriales.html">Tutoriales</a></li>
<li><a href="registrate.html">Registrarse</a></li>
</ul>
</body>
</html>