menu desplegable??

#1 (**permalink**) 14/04/2004, 22:45

alguien tiene un scripts cool menu desplegable para mi sitio.. chido.. agradesco su ayuda al que me ayuda y a los demas tambien por echarle un vistazo a este mensaje soy nuevo en esto.. Saludos..

KarlanKas · #2 (**permalink**) 15/04/2004, 01:46

Sé que en javascript.tunait.com tienes un generador de menus "chido chido"!

http://javascript.tunait.com/javascr...=generadormenu

blue_laser0 · #3 (**permalink**) 15/04/2004, 09:56

MUY BUENO!

Pero ....si tengo un combo y el submenu se extiende hasta el combo, el submenu no aparecera porque el combo lo cubre.... Como puedo hacer para que al colocar el mouse sobre una opcion del menu, el combo se desaparezca y luego regrese? con algun hidden o algo asi..como podria hacerlo?

GRACIAS!

KarlanKas · #4 (**permalink**) 15/04/2004, 10:41

Pues sería algo así:

Pones en la celda o el div donde esté la cabecera del menú que incordia:

onmouseover="document.nombreDelFormulario.nombreDe lCombo.style.visibility='hidden'"

y ya está. Si hay otro onmouseover ponlo así:

onmouseover="LO DE ANTES;document.nombreDelFormulario.nombreDelCombo.style. visibility='hidden'"

blue_laser0 · #5 (**permalink**) 15/04/2004, 11:34

Gracias karlankas!
pero se me desaparece si lo coloco en el tunmen...o donde seria?
Primera parte...Disculpa tunait por quitar el copyright, es que sino no puedo pegar el codigo aca porque es muy largo...
Primera parte:

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
posArriba = 50
posIzquierda = 0
anchoOp = 80
menuPrin=3
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
var tiempo
function menucete(ide,num){ // crea submenus principales (capa)
espan = document.createElement("span")
document.getElementById('Men_'+num).appendChild(espan)
espan.id=ide.toLowerCase(ide)+'_'+num
espan.className="subMe"
espan.cierra = true
espan.tiempo = 0
espan.style.top="-1px"
espan.onmouseout=function(){
	setTimeout('ocultaP()',1000)
	}
with(espan.style){
	width = anchoOp+"px"
	}
posIzquierda += anchoOp
construye(ide+'_'+num,eval('Op_'+num).subO)
}
function seccion(tex,enl,dstn,subO,an,dir){
this.tex = tex
this.enl = enl
this.dstn = dstn
this.subO = subO
this.dir = dir
this.an = an
}
var Op_0 = new seccion("TEST",null,null,2)
var Op_0_0=new seccion('testsub','aaaa.html',null,0,null,'iz')
var Op_0_1=new seccion('testsub2',null,null,0,null,'iz')
var Op_1 = new seccion("",null,null,0)
var Op_2 = new seccion("",null,null,0)
var anchoTotal = 252
if(!tunIex){anchoTotal += menuPrin*3}
function menPrin(){ //crea menu principal
menuP=document.createElement('div')
if(!tunIex){
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
fila=document.createElement('tr')
fila.id ='filita'
tablaP.appendChild(fila)
tablaP.cellSpacing='0'
tablaP.className='celda'
}
document.getElementById('tunMenu').appendChild(menuP)
menuP.className = "subMeP"
menuP.id = 'MenuPrincipal'
menuP.style.visibility='hidden'
menuP.style.position="absolute"
menuP.style.width = anchoTotal +"px"
for(s=0; s<menuPrin; s++){ //crea botones principales
	if(!tunIex){opcionP=document.createElement('div')}
	else{opcionP=document.createElement('span')}
	opcionP.className = "botonesP"
	opcionP.style.width= anchoOp+'px'
	document.getElementById('MenuPrincipal').appendChild(opcionP)
	opcionP.id='Men_'+s
	opcionP.onclick=function(){
		}
	if(!tunIex){
	celda = document.createElement('td')
	document.getElementById('filita').appendChild(celda)
	celda.id='celda_' + s
	celda.appendChild(opcionP)
	celda.className='celda'
	}
	if(eval('Op_'+s).subO > 0){
	menucete('Op',s)
	}
}
}

var subs=new Array(0)
function construye(ide,num){
subOp=0
for(m=0; m<num; m++){
	opchon = eval(ide +'_' + m)
	caja = document.createElement("div")
	boton = document.createElement("div")
	boton.appendChild(caja)
	caja.className='Caj'
	document.getElementById(ide.toLowerCase()).appendChild(boton)

	identi = ide.toLowerCase()  + "_" + m
	caja.id=identi+'caja'
	boton.id = identi
	boton.className = 'botones'
	document.getElementById(identi).appendChild(document.createTextNode(opchon.tex))
	salto = document.createElement('br')
	boton.onmouseover=function(){
		this.className='botonesHover'
		this.parentNode.cierra=false
		muestra(this.parentNode.id)
		}
	boton.onmouseout=function(){
		this.className='botones'
		this.parentNode.cierra = true
		}
	if(opchon.subO > 0){
		subs[subs.length] = identi
		subOp++
		boton.style.cursor='default'
		}
	else{
		boton.style.cursor=cur
		if(opchon.enl!=null){
			boton.enl=opchon.enl
			boton.dstn=opchon.dstn
			boton.onclick=function(){
			enlaces(this.enl,this.dstn)
				}
			}
		}
	
}	
	if(subs.length>0){construyeSub(subs)}
}
function construye2(ide,num){
for(m=0; m<num; m++){
	opchon = eval(ide +'_' + m)
	caja = document.createElement("div")
	boton = document.createElement("div")
	boton.appendChild(caja)
	caja.className='Caj'
	document.getElementById(ide.toLowerCase()+'_sub').appendChild(boton)
	identi = ide.toLowerCase()  + "_" + m
	boton.id = identi
	caja.id=identi+'caja'
	boton.className = 'botones'
	document.getElementById(identi).appendChild(document.createTextNode(opchon.tex))
	salto = document.createElement('br')
	boton.onmouseover=function(){this.className='botonesHover'}
	boton.onmouseout=function(){this.className='botones'}
	
	
	if(opchon.subO > 0){
		subs[subs.length] = identi
		subOp++
		boton.style.cursor='default'
		}
	else{
		boton.style.cursor=cur
		if(opchon.enl!=null){
			boton.enl=opchon.enl
			boton.dstn=opchon.dstn
			boton.onclick=function(){
			enlaces(this.enl,this.dstn)
				}}}}}

var cur=tunIex?'hand':'pointer'

function construyeSub(lista){
largo = subs.length
for(t=0; t<subs.length;t++){
if(subs[t] != null){
	obj = subs[t].charAt(0).toUpperCase() + subs[t].substr(1)
	obj2 = subs[t].charAt(0).toUpperCase() + subs[t].substring(1,subs[t].length-2)
	espan = document.createElement("span")
	document.getElementById(subs[t]+'caja').appendChild(espan)

	espan.id=subs[t]+'_sub'
	espan.className="subMe"
	espan.cierra = true
	document.getElementById(subs[t]).onmouseover=function(){
	this.className = 'botonesHover'
	this.parentNode.cierra=false
	muestra(this.id+'_sub')
	}
	document.getElementById(subs[t]).onmouseout=function(){
		this.className = 'botones'
		this.parentNode.cierra = true
		oculta(this.id+'_sub')
		}
	espan.onclick=function(){
	
		}
		if(eval(obj2).an){An=eval(obj2).an}
		else{An=anchoOp}
		if(eval(obj).an){An2=eval(obj).an}
		else{An2=anchoOp}
		if(eval(obj).dir=='iz')
		{pIz=-(An2-20)+"px"}
		else{pIz=(An-20)+"px";}
		
	with(espan.style){
	position="absolute"
	width = An2+"px"
	left= pIz
	visibility = 'hidden'
	}
	construye2(obj,eval(obj).subO)
	subs[t] = null
	}
	}
}
function enlaces(enl,dstn){
if(dstn != null && dstn.toLowerCase() == 'nueva'){
	window.open(enl)
	}
else if(dstn==null){
	location.href=enl
	}
else{
	eval(dstn+'.location.href='+enl)
	}

}
function muestra(cual){
document.getElementById(cual).style.visibility='visible'
}
function oculta(cual){
document.getElementById(cual).style.visibility='hidden'
}

function ocultaP(){
for(y=0;y<menuPrin;y++){

if(document.getElementById('op_'+y)!=null){
	if(document.getElementById('op_'+y).cierra){
	document.getElementById('op_'+y).style.visibility='hidden'
	}
	}
	}
}
var reaj=0
function centra(){
anM=(anchoOp*menuPrin)+(4*menuPrin)+reaj
posCentra =anM/2
document.getElementById('MenuPrincipalP').style.width=anM+'px'
marco.document.getElementById('MenuPrincipal').style.width=anM+'px'
document.getElementById('MenuPrincipalP').style.left='50%'
marco.document.getElementById('MenuPrincipal').style.left='50%'
document.getElementById('MenuPrincipalP').style.marginLeft=-posCentra
marco.document.getElementById('MenuPrincipal').style.marginLeft=-posCentra
reAjusta()
}
function reAjusta(){
if((document.getElementById('tuMen0').scrollHeight*2)<document.getElementById('MenuPrincipalP').scrollHeight){reaj+=2; centra()}
}
function inicio(){
////////////////////////////////////////////
menuP=document.createElement('div')
if(!tunIex){
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
fila=document.createElement('tr')
fila.id ='filitaP'
tablaP.appendChild(fila)
tablaP.cellSpacing='0'
tablaP.className='celda'
}
document.getElementById('tunMenu').appendChild(menuP)
menuP.className = "subMeP"
menuP.id = 'MenuPrincipalP'
menuP.style.width = anchoTotal+"px"

for(s=0; s<menuPrin; s++){ //crea botones principales

	if(!tunIex){opcionP=document.createElement('div')}
	else{opcionP=document.createElement('span')}
	opcionP.className = "botones"
	opcionP.style.width= anchoOp+'px'
	opcionP.appendChild(document.createTextNode(eval('Op_'+s).tex))
	document.getElementById('MenuPrincipalP').appendChild(opcionP)
	opcionP.style.cursor = cur
	opcionP.id='tuMen'+s
	if(eval('Op_'+s).enl!=null){
	opcionP.enl=eval('Op_'+s).enl
	opcionP.dstn=eval('Op_'+s).dstn
	opcionP.onclick=function(){
		enlaces(this.enl,this.dstn)
		}
	}
	if(!tunIex){
	celda = document.createElement('td')
	document.getElementById('filitaP').appendChild(celda)
	celda.id='celdaP_' + s
	celda.appendChild(opcionP)
	celda.className='celda'
	
	}
}
////////////////////////////////////////////

blue_laser0 · #6 (**permalink**) 15/04/2004, 11:36

//LA CONTINUACION

Código:

for(n=0;n<menuPrin;n++){
document.getElementById('tuMen'+n).onmouseover=function(){
	if(document.getElementById('op_'+this.id.substr(5))!=null){
		clearTimeout(tiempo)
		document.getElementById('op_'+this.id.substr(5)).cierra=false
		ocultaP()
		muestra('op_'+this.id.substr(5))
		}
	else{
		clearTimeout(tiempo)
		ocultaP()
		}
	}
document.getElementById('tuMen'+n).onmouseout=function(){
if(document.getElementById('op_'+this.id.substr(5))!=null){
		document.getElementById('op_'+this.id.substr(5)).cierra=true
		tiempo =setTimeout('ocultaP()',1000)
		}
	}
}
menPrin()
}
var activo = false
window.onload=inicio
</script>
<style type="text/css">
<!--
.botones {
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	background-color: #D8D8C5;
	text-align: center;
	border: 1px solid #333333;
	margin: 2px;
	vertical-align: middle;
	color: #000000;

	
}
.botonesHover{
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	background-color: #0099CC;
	text-align: center;
	border: 1px solid #333333;
	margin: 2px;
	vertical-align: top;
	color: #FFFFFF;
}
.subMe {
	visibility: hidden;
	position: absolute;
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	background-color: #D8D8C5;
	text-align: center;
	border: 1px solid #000099;

}
.subMeP {
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	background-color: #D8D8C5;

}
.botonesP {
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	background-color: #D8D8C5;
	border: 1px solid #009900;
	margin: 2px;
	color: #000000;
	vertical-align: top;
	height: 10px;
}
.celda{
margin:0;
padding: 0;
}
.pepe{
border: 1px solid #ff0000;
position:absolute;
left:0
}
-->
</style>
</head>
<body>
<p>&nbsp;</p>
<div id="tunMenu"></div>
  <form name="form1" method="post" action="">

      <select name="select">
        <option value="aaaa">aaa</option>
        <option value="bbbb">bbbb</option>
        <option value="cccccc">cccc</option>
      </select>
    </p>
  </form>
</body>