Código:
<head>
<title>Menú desplegable - javascript.tunait.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
posArriba = 50;
posIzquierda = 0;
var anchoOp = 100;
var 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("sdf",null,null,1);
var Op_0_0=new seccion('lacrimos2','lacrimosa2.php','_blank',0);
var Op_1 = new seccion("sdf",null,'',0);
var Op_2 = new seccion("sdfdsf",null,'',0);
var anchoTotal = 312;
if(!tunIex){anchoTotal += menuPrin*3}
function menPrin(){ //crea menu principal
menuP=document.createElement('div')
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
cuerpoTabla = document.createElement('tbody')
tablaP.appendChild(cuerpoTabla)
fila=document.createElement('tr')
fila.id ='filita'
cuerpoTabla.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
opcionP=document.createElement('div')
opcionP.className = "botonesP"
opcionP.style.width= anchoOp+'px'
document.getElementById('MenuPrincipal').appendChild(opcionP)
opcionP.id='Men_'+s
opcionP.onclick=function(){
}
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'
}
}
}
}
function inicio(){
menuP=document.createElement('div')
tablaP = document.createElement('table')
tablaP.border=1
menuP.appendChild(tablaP)
cuerpoTabla = document.createElement('tbody')
tablaP.appendChild(cuerpoTabla)
fila=document.createElement('tr')
fila.id ='filitaP'
cuerpoTabla.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
opcionP=document.createElement('div')
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)
}
}
celda = document.createElement('td')
document.getElementById('filitaP').appendChild(celda)
celda.id='celdaP_' + s
celda.appendChild(opcionP)
celda.className='celda'
}
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)
}
}
}
document.getElementById('tunMenu').style.width = anchoTotal + "px"
menPrin()
}
var activo = false
window.onload=inicio
</script>
</HEAD>
<body>
<body>
<div id="tunMenu"></div>
</body>
