Hola,
En mi web, tengo un 2 menus horizontales.
El primer menu horizontal, son las opciones generales, y esta siempre presente.
El segundo menu horizontal es el submenu resultante de la opcion seleccionada en el menu de arriba.
(Por ejmplo,arriba tengo contactar-si paso el raton por la capa correspondiente a contactar, se me muestra en el menu inferior una capa que es un submenu de contactar:enviar email y plano de situacion-)
En principio parece que funciona bien, pero no es nada preciso, es decir, a veces se me va una capa cuando no deberia irse (es decir,tengo que onmouseout pone la capa invisible, y mas o menos funciona, pero a veces me lo quita cuando aun asigo sobre la capa).
¿por que puede ser?
Gracias!! :d
Pongo aqui el codigo por si os sirve de algo....
var menuActual=0;
function cambiaMenuH(nuevoMenu){
quitaMenu(menuActual);
menuActual=nuevoMenu;
ponMenu(nuevoMenu)
}
function quitaMenu(aQuitar){//recomendable uso de contantes!
switch(aQuitar){
case 0: break;
case 1: cAQuitar=document.getElementById('menuQuienes');
cAQuitar.style.visibility = 'hidden';
break;
case 2:cAQuitar=document.getElementById('menuContactar' );
cAQuitar.style.visibility = 'hidden';
break;
case 3:cAQuitar=document.getElementById('menuCursosUni' );
cAQuitar.style.visibility = 'hidden';
break;
case 4:cAQuitar=document.getElementById('menuCursosDP') ;
cAQuitar.style.visibility = 'hidden';
break;
}
}
function ponMenu(aPoner){//recomendable uso de contantes!
switch(aPoner){
case 1: cAPoner=document.getElementById('menuQuienes');
cAPoner.style.visibility = 'visible';
break;
case 2:cAPoner=document.getElementById('menuContactar') ;
cAPoner.style.visibility = 'visible';
break;
case 3:cAPoner=document.getElementById('menuCursosUni') ;
cAPoner.style.visibility = 'visible';
break;
case 4:cAPoner=document.getElementById('menuCursosDP');
cAPoner.style.visibility = 'visible';
break;
}
}
<!-- Menu Horizontal Superior -->
<div align="center" id="inicio" onClick="quitaMenu(menuActual)" style="position:absolute; width:100px; height:59px; z-index:2; left: 5px; top: 108px;">
Inicio
</div>
<div align="center" onMouseOver="cambiaMenuH(1)" id="inicio" style="background-color:#00ff0f;position:absolute; width:100px; height:19px; z-index:2; left: 105px; top: 108px;">
Quienes Somos
</div>
<div align="center" onMouseOver="cambiaMenuH(2)" id="inicio" style="background-color:#f0ff00;position:absolute; width:100px; height:19px; z-index:2; left: 205px; top: 108px;">
Contactar
</div>
<div align="center" onMouseOver="cambiaMenuH(3)" id="inicio" style="background-color:#0fff00;position:absolute; width:100px; height:19px; z-index:2; left: 305px; top: 108px;">
Cursos Uni
</div>
<div align="center" onMouseOver="cambiaMenuH(4)" id="inicio" style="background-color:#00fff0;position:absolute; width:100px; height:19px; z-index:2; left: 405px; top: 108px;">
Cursos de DP
</div>
<!-- Menu Horizontal Inferior -->
<div id="menuQuienes" onMouseOut="quitaMenu(1)" style="background-color:#ff0000;position:absolute;visibility:hidden; width:790px; height:40px; z-index:4; left: 5px; top: 134px;backgrond-color:#ffff00">
<a href="" > Historia</a>
<a href="" >Club de amigos</a>
</div>
<div id="menuContactar" onMouseOut="quitaMenu(2)" style="background-color:#ff0000;position:absolute; visibility:hidden; width:790px; height:40px; z-index:4; left: 5px; top: 134px;">
<a href="">Datos de Contacto</a>
<a href="">Pedir Informacion</a>
<a href="">Enviar e-mail</a>
<a href="">Preguntar Y Sugerencias</a>
</div>
<div id="menuCursosUni" onMouseOut="quitaMenu(3)" style="background-color:#ff0000;position:absolute; width:790px; height:40px; visibility:hidden; z-index:4; left: 5px; top: 134px;">
<a href="especialista.htm" align="center">Especialista en IE</a>
</div>
<div id="menuCursosDP" onMouseOut="quitaMenu(4)" style="background-color:#ff0000;position:absolute;visibility:hidden; width:790px; height:40px; z-index:4; left: 5px; top: 134px;">
<a href="inteligencia_emocional_ie.htm">Inteligencia Emocional</a>
</div>
