Estoy haciendo un menu que coje la informacion de los selects y genera un menu con slide... consta de 3 archivos
el HTML
Código HTML:
<!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=iso-8859-1" />
<title>Documento sin título</title>
</head>
<script language="javascript" src="menusaltdesp.js"></script>
<link rel="stylesheet" type="text/css" href="menusaltdesp.css" />
<body onload="altacombo('prova',50)">
<table width="100%" cellpadding="0" cellspacing="0" >
<tr>
<td width="32%"> </td>
<td width="68%" valign="middle"><select name="prova" id="prova" title="0">
<option value="7">lol</option>
<option value="1">hola</option>
<option value="2">xd</option>
</select>
<div id="cmb_prova" ></div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html> EL JS llamado menusaltdesp.js
Código:
var correctborde=0
var velocidad =60
var alturaopcio=24
var Combo= new Array()
var ComboESP= new Array()
var CuntaDesp= new Array()
var Cabecera= new Array()
var Numopts= new Array()
var Encendido= new Array()
var Cierre= new Array()
function altacombo(selectid,ancho){
Combo[selectid]=document.getElementById(selectid)
Cabecera[selectid]='<table cellpadding="0" cellspacing="0" width="'+ancho+'px"><tr class="cap"><td>'+Combo[selectid].options[Combo[selectid].selectedIndex].text+"</td> </tr> "
Cierre[selectid]=' </table>'
var dhtmlselectbox=document.getElementById("cmb_"+selectid)
dhtmlselectbox.innerHTML='<div class="base">'+Cabecera[selectid]+Cierre[selectid]+'</div>\n'
ComboESP[selectid]=dhtmlselectbox.getElementsByTagName("div")[0]
ComboESP[selectid].style.width=ancho+'px'
dhtmlselectbox.style.display="block"
ComboESP[selectid].onmouseover=function(){
Encendido[selectid]=1
desplegar(selectid)
}
ComboESP[selectid].onmouseout=function(){
arronsar(selectid)
}
Numopts[selectid]=Combo[selectid].options.length
correctborde=correctborde*(Numopts[selectid]+1)
ComboESP[selectid].style.display="block"
ComboESP[selectid].style.height=alturaopcio+correctborde+'px'
Combo[selectid].style.display="none"
Encendido[selectid]=0
CuntaDesp[selectid]=alturaopcio+correctborde
}
function desplegar(selectid){
if(Encendido[selectid]==1 && !(CuntaDesp[selectid]>(Numopts[selectid]*alturaopcio)+correctborde)){
CuntaDesp[selectid]+=alturaopcio;
ComboESP[selectid].style.height=CuntaDesp[selectid]+'px'
if(CuntaDesp[selectid]>((Numopts[selectid]*alturaopcio)+correctborde)){
var dinshtml=Cabecera[selectid]
for (var i=0; i<Combo[selectid].options.length; i++)
dinshtml+='<tr class="opt"><td><a href="'+Combo[selectid].options[i].value+'">'+Combo[selectid].options[i].text+'</a></td></tr>\n'
ComboESP[selectid].innerHTML=dinshtml+Cierre[selectid]
Encendido[selectid]=0
}
setTimeout("desplegar('"+selectid+"')",velocidad)
}
}
function arronsar(selectid){
Encendido[selectid]=0
ComboESP[selectid].innerHTML=Cabecera[selectid]+Cierre[selectid]
ComboESP[selectid].style.height=alturaopcio+correctborde+'px'
CuntaDesp[selectid]=alturaopcio+correctborde;
}
El css llamado menusaltdesp.css
Código:
.base{
background-color:#009966;
border-color: #000000;
border: 1px dashed;
z-index:auto;
}
tr {
height: 24px;
}
.base td{
border: 1px solid black ;
}
tr .cap{
background-color:#006699;
}
tr .opt{
background-color: #33CCFF;
}
EL problema radica que cuando me muevo por una de las opciones el evento onmouseout del div salta y el desplegable se recoje..
He intentado usar el z-index para solucionarlo pero no me aclaro.. solo consigo ocultar la tabla detras del div... si alguien tiene alguna idea o sugerencia lo agradeceria.
Porbar el codigo y lo vereis claramente....
PD: el script no est aterminado :P
GRACIAS