Menu DHTML Basado en select(problema de niveles?) AVANZADOS help

BiGloOl · #1 (**permalink**) 06/06/2007, 14:34

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&iacute;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%">&nbsp;</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>&nbsp;</td>
    <td>&nbsp;</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

BiGloOl · #2 (**permalink**) 07/06/2007, 08:01

puedo usar el onclick pero no es lo que queria.. alguien me puede ayudar..?

derkenuke · #3 (**permalink**) 07/06/2007, 17:26

Eso es claramente por el

Código PHP:

      ComboESP[selectid].onmouseout=function(){
    arronsar(selectid)
    }

Tendrás que buscar otra manera, por ejemplo llamar a arronsar() cuando se haga onmouseout pero de toda la tabla de las subopciones, o cuando hagas el efecto de agrandar el div, en vez de ser otro div cualquiera independiente del que se muestra inicialmente, que sea ese mismo div inicial el que se agrande para mostrar las demas opciones...

Es un problema de planteamiento, entonces. Habrá que darle vueltas.

Un saludo.

BiGloOl · #4 (**permalink**) 08/06/2007, 07:06

uh.. he probado lo de poner el evento en la tabla pero salta =mente cuando cambias de opcion.. por los tr y td supongo... otra opcion es hacer los bordes del deplegable con imagenes de pixel de largo i cuando esten onmouseout que se retire..

Mas sugerencias? alguna panacea?

programeitor · #5 (**permalink**) 08/06/2007, 13:42

Hola

ComboESP[selectid].innerHTML=Cabecera[selectid]+Cierre[selectid]

al cambiarle el contenido, no es que se recoja, es que se crea de nuevo, con lo que naturalmente aparece recogido.

Salud os

BiGloOl · #6 (**permalink**) 09/06/2007, 18:41

Cita:

Iniciado por programeitor

Hola

ComboESP[selectid].innerHTML=Cabecera[selectid]+Cierre[selectid]

al cambiarle el contenido, no es que se recoja, es que se crea de nuevo, con lo que naturalmente aparece recogido.

Salud os

xD.... sin comentarios