Hola estoy desarrollando un menu con jquery en el que al pasar el mouse hace un mouseover con efecto fade. El caso es que cuando carga la página el estado activo del menu desaparece al posicionar el mouse encima y incluso en firefox o chrome no funciona bien el estado activo al clikear más de una vez este no se carga.Este es el código para el menu superior y el inferior
<ul id="topnav">
<li class="empresa"><a href="empresa.php" class="fade" id="linkOver">empresa</a></li>
<li class="services"><a href="e-catalogo.php" class="fade" id="linkOver">e-catálogo</a></li>
<li class="portfolio"><a href="galeria.php" class="fade" id="linkOver">galería</a></li>
</ul>
.....
<ul id="bottom_nav">
<li class="contact"><a href="donde_estamos.php" class="fade" id="linkOver">¿dónde estamos?</a></li>
<li class="contact"><a href="contact.php" class="fade" id="linkOver">contacto</a></li>
<li class="blog"><a href="links.php" class="fade" id="linkOver">links</a></li>
</ul>
Javascript
:
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="../js/jquery.dwFadingLinks.js"></script>
/*Este es el código de dwFadingLinks.js:
jQuery.fn.dwFadingLinks = function(settings) {
settings = jQuery.extend({
color: '#ff8c00',
duration: 500
}, settings);
return this.each(function() {
var original = $(this).css('color');
$(this).mouseover(function() { $(this).animate({ color: settings.color },settings.duration); });
$(this).mouseout(function() { $(this).animate({ color: original },settings.duration); });
});
};
*/
<script type="text/javascript" src="../js/jquery.effects.core_1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fade').dwFadingLinks({
color: '#000',
duration: 700
});
});
</script>
<script language="javascript" type="text/javascript">
function setActive() {
aObj = document.getElementById('topnav').getElementsByTag Name('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
function setActive2() {
aObj = document.getElementById('bottom_nav').getElementsB yTagName('a');
for(i=0;i<aObj.length;i++) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
}
}
}
window.onload = function() {
setActive();
setActive2();
}
</script>
Una ayuda porfavor
Gracias de antemano
Gabi