Menu web en java

Pachy · #1 (**permalink**) 13/12/2004, 09:22

hola, quería hacer un menú para mi web en javascript, lo quería asi:

al lado izquierdo, con su propia " scrol bar " ( ¿ esta mal escrito? ) inferior y lateral.
se que es posible porque lo he visto en otras webs.

Gracias de antemano a todos!

KarlanKas · #2 (**permalink**) 13/12/2004, 18:12

Visita http://javascript.tunait.com que tiene unos menues de rechupete!

Pachy · #3 (**permalink**) 14/12/2004, 15:29

Gracias!!! me ha sido de mucha ayuda el link

KarlanKas · #4 (**permalink**) 14/12/2004, 15:41

De nada!

Para eso estamos!

Aunque a quien le debes dar las gracias es a su creadora: la magnífica tunait, maestra de maestros.

Pachy · #5 (**permalink**) 14/12/2004, 15:54

Código HTML:

 <html>
<head>
<title> LO QUE SEA </title>
<style>
<script language="JavaScript" type="text/javascript">

posArriba = 50
posIzquierda = 0
anchoOp = 100
menuPrin=5

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("Foro",null,'Nueva',0)

var Op_1 = new seccion("Links",null,null,3)
var Op_1_0=new seccion('Media-Vida','www.media-vida.net','Nueva',0,null,'iz')
var Op_1_1=new seccion('Steam','http://www.steampowered.com/','Nueva',0,null,'iz')
var Op_1_2=new seccion('United Admins',null,null,0,null,'iz')

var Op_2 = new seccion("Contacta",'C:\dod\Contacta\contacta.htm',null,0)

var Op_3 = new seccion("",null,null,)

var Op_4 = new seccion("",null,null,)


var anchoTotal = 520
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'
 
 }
}
////////////////////////////////////////////

 

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>

lo pongo, y nada. ¿por qué?