Foros del Web » Programando para Internet » Javascript »

Menu contractil tunait, editar para subopciones dentro de subopcion

Estas en el tema de Menu contractil tunait, editar para subopciones dentro de subopcion en el foro de Javascript en Foros del Web. Hola, en la web de tunait en la seccion menu y navegacion esta el codigo del menu contractil, pero solo te deja una sub opcion. ...
  #1 (permalink)  
Antiguo 28/12/2006, 10:34
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 19 años, 2 meses
Puntos: 1
Menu contractil tunait, editar para subopciones dentro de subopcion

Hola, en la web de tunait en la seccion menu y navegacion esta el codigo del menu contractil, pero solo te deja una sub opcion. Quisiera poder poner sub opciones dentro de una sub opcion.

Pongo el codigo cmpleto:
Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<head>
<title>Men&uacute; contr&aacute;ctil - tunait.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
/**************************************************************
Menú contráctil. Script creado por Tunait! (6/1/2004)
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
No autorizo a publicar y ofrecer el código en sitios de script sin previa autorización
Si quieres publicarlo, por favor, contacta conmigo.
****************************************************************/
var anchoMenu = 200 //anchura del menú
var secciones = 5 // cantidad de secciones principales

// var Menu_num = new Array('texto','enlace','target',link o padre(0 es link y + es cantidad de hijos))
//poner en null los valores que se quieran omitir
var Menu_0 = new Array('opcion 1',null,null,2) //opcion de menú principal
	var Menu_0_0 = new Array('subOpción 1','subop1.htm',null) //subopción del menú
	var Menu_0_1 = new Array('subOpción 2',null,null) //subopción del menú principal
var Menu_1 = new Array('opcion 2','subop1.htm','Nueva',0)// 'Nueva' si se quiere en ventana nueva
var Menu_2 = new Array('opcion 3','op3.htm',null,0)//null si se quiere cargar en _self
var Menu_3 = new Array('opcion 4','op3.htm','Nueva',0)
var Menu_4 = new Array('opcion 5',null,null,3)
	var Menu_4_0 = new Array('subOpción 3',null,null)
	var Menu_4_1 = new Array('subOpción 4',null,null)
	var Menu_4_2 = new Array('subOpción 5',null,null)

/*************No tocar a partir de aquí*****************/
var sec
var iexTun=document.appName=='Microsoft Internet Explorer'?true:false;
if(iexTun){var cursorcillo='hand'}
else{var cursorcillo='pointer'}
function inicioMenu(){
with(document){
	write('<div id="Menu">')
	write('<table id="tablaMenu" cellspacing="1">')
	}
for(m=0; m<secciones; m++){ 
	with(document){
		write('<tr><td class="secciones" id="menu_' + m +'">' )
		write(eval('Menu_' + m + '[0]') + '</td>')
		write('</tr>')
		}
	
	sec = eval('Menu_' + m)
	document.getElementById('menu_' + m).onmouseover=function(){
		this.className = 'seccionesHover'
		}
	document.getElementById('menu_' + m).onmouseout=function(){
		this.className = 'secciones'
		}
		if(sec[3]>0){
			document.getElementById('menu_' + m).onclick=function(){
			abreMenu(this.id)
			}
		subMenu('Menu_' + m,sec[3],m)
		}
		else{
		document.write('<tr><td class="cerrado"></td></tr>')
			if(sec[1]!=null){
				document.getElementById('menu_' + m).onclick=function(){
				ir(this.id)
				}
			}
		}
		
}
with(document){
	write('</table>')
	write('</div>')
	}

}
function subMenu(n,cant,nm){
with(document){
	write('<tr><td id="' + n + 'B" class="cerrado">')
	write('<table class="subMeTabla" cellspacing="1">')
	}
	for(s=0; s<cant; s++){
	subMe=eval(n+"_"+s)
		with(document){
			writeln('<tr><td style="cursor:' +cursorcillo+'"onmouseover="this.className=\'subSeccionesHover\'"  onmouseout="this.className=\'subSecciones\'" class="subSecciones" onclick="ir(\'Menu_'+nm+'_'+s+'\')">' + subMe[0] + '</td></tr>')
			}
		}
document.write('</table>')
document.write('</td></tr>')
}
function abreMenu(cual){
clase = cual
cual = cual.replace(/m/,"M")
cua = eval("'" + cual + "B'")

if(document.getElementById(cual+'B').className == 'abierto'){
	document.getElementById(cual+'B').className = 'cerrado'
	document.getElementById(clase).className = 'secciones'
	document.getElementById(clase).onmouseout=function(){
		this.className = 'secciones'
		}
	document.getElementById(clase).onmouseover=function(){
		this.className = 'seccionesHover'
		}
	}
else{
	document.getElementById(cual+'B').className = 'abierto'
	document.getElementById(clase).className = 'seleccionado'
	document.getElementById(clase).onmouseout=function(){
	return false
		}
	document.getElementById(clase).onmouseover=function(){
	return false
		}
	}
}
function ir(donde){
donde = eval(donde.replace(/m/,"M"))
if(donde[1] != null){
marco = donde[2]
if(marco == 'Nueva'){
	window.open(donde[1])
	}
else if(marco == null){
	location.href=donde[1]
	}
else{
	eval('parent.' + marco + '.location.href="' + donde[1] + '"')
	}}
}
/********** hasta aquí *************/
</script>
<style type="text/css">
.subMeTabla{ /*tabla de submenú*/
width: 100%;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 0;
}
.abierto{ 
width: 100%;
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
font-weight: bold;
padding: 0;
}
.cerrado{/*no tocar*/
display: none;
height: 0;
padding:0;
}

#Menu{
width: 150px;
cursor: default;
}
#tablaMenu{ /*aspecto de la tabla del menú*/
width: 100%;
border: 1px solid #000000;
background-color: #CC9999;
padding: 0;
}
.secciones{ /*aspecto de los botones principales*/
	text-align: center;
	background-color: #ffffff;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #9900FF;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #9900FF;
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	padding:0;
	
}
.seccionesHover{ /*aspecto de los botones principales al pasar el mouse*/
	background-color: #9966CC;
	color: #ffffff;
	text-align: center;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #9900FF;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #9900FF;
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	padding:0;
}
.subSeccionesHover{ /*aspecto de los botones de las subsecciones al pasar el mouse*/
	text-align: center;
	background-color: #F0D2F0;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #9900FF;
	border-bottom-color: #9900FF;
	border-left-color: #000000;
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 5px;
	color: #990000;
}
.subSecciones{ /*aspecto de los botones de las subsecciones*/
	text-align: center;
	background-color: #D9C6EC;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #9900FF;
	border-bottom-color: #9900FF;
	border-left-color: #000000;
	font-family: Tahoma, Verdana, Arial;
	font-weight: bold;
	font-size: 12px;
	margin-bottom: 5px;
	color: #FFFFFF;
}
.seleccionado { /*aspecto del botón seleccionado*/
	font-family: Tahoma, Verdana, Arial;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	background-color: #003399;
	text-align: center;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #FFFFFF;
}
</style>
</head>

<body>
<script>inicioMenu()</script>
</body>

</html>



he intentado editar poniendo dentro de la sub opcion 1 otra sub opcion y no va.

pongo lo que he intentado.

Código:
var Menu_0 = new Array('opcion 1',null,null,2) //opcion de menú principal
	var Menu_0_0 = new Array('subOpción 1','subop1.htm',null) //subopción del menú
	var Menu_0_1 = new Array('subOpción 2',null,null) //subopción del menú principal
	 var Menu_0_1_0 = new Array('subOpciónsub',null,null,0) //subopción de subopcion del menú principal 
  #2 (permalink)  
Antiguo 29/12/2006, 05:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Re: Menu contractil tunait, editar para subopciones dentro de subopcion

Hola farve

Ese menú trabaja sólo con un sub-nivel. En principio no tengo intención de hacerle modificación alguna en vistas a emplear técnicas más accesibles.

Lo que sí he hecho ha sido un tutorial para poder crear un equivalente accesible y con posibilidad de más de un sub-nivel, mira a ver si te puede interesar
http://www.tunait.com/tutoriales/com...contractil.php

Un saludo
  #3 (permalink)  
Antiguo 29/12/2006, 11:26
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 19 años, 2 meses
Puntos: 1
Re: Menu contractil tunait, editar para subopciones dentro de subopcion

hola, gracias,
pero esque no stoy muy puesto en javascript, y me he leido el manual unas cuantas veces y me he quedado igual(o casi)

me podrias poner el codigo completo del ejemplo que haces en el manual del menu, para poder "estudiarlo"?
gracias y saludos
  #4 (permalink)  
Antiguo 29/12/2006, 14:01
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
Re: Menu contractil tunait, editar para subopciones dentro de subopcion

Claro, mira la función javascript es esta

Código:
function Menu(el){
   elemento = el.parentNode.getElementsByTagName('ul')[0]
   elemento.style.display = elemento.style.display == 'none' ? 'block' : 'none'
}
y el código html del menú del ejemplo es este

Código HTML:
<ul id="menu">
      <li><strong onclick="Menu(this)">Apartado 1</strong> 
         <ul>
            <li><strong onclick="Menu(this)">secci&oacute;n 1</strong>
		  <ul>
                      <li>seccion 1-b</li>
                   </ul>
	   </li>
            <li>secci&oacute;n 2</li>
            <li>secci&oacute;n 3</li>
         </ul>
      </li>
      <li><strong onclick="Menu(this)">Apartado 2 </strong>
         <ul>
            <li>seccion 4</li>
            <li>secci&oacute;n 5</li>
         </ul>
      </li>
      <li><strong onclick="Menu(this)">Apartado 3</strong> 
         <ul>
            <li>secci&oacute;n 6</li>
            <li>secci&oacute;n 7</li>
            <li>secci&oacute;n 8</li>
         </ul>
      </li>
   </ul> 
Para que el menú sea accesible sin javascript le agregué a la lista un identificador id="menu" para que sea el propio js el que se encargue de cerrar las opciones. Si no hay javascript todas las opciones del menú quedarán abiertas y visibles.

Para contraer iniciamente los menús agrega este script

Código:
function iniciaMenu(){
	el = document.getElementById('menu')
	st = el.getElementsByTagName('strong')
	for(m=0; m<st.length; m++){
		Menu(st[m])
	}
}
onload = iniciaMenu;
Y el aspecto del menú pues ya te lo trabajas tú al gusto

Código HTML:
<style type="text/css">
<!--
#menu li{
	list-style-type: none;
}
#menu li ul{
	margin-left: 0;
	padding-left: 0;
	
}
#menu li strong{
	cursor: pointer;
}
#menu li ul li{
	margin-left: 15px;
}
-->
</style>

Si no entiendes algo me avisas :arriba::-)

Un saludo :cool:
  #5 (permalink)  
Antiguo 08/01/2007, 17:26
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 19 años, 2 meses
Puntos: 1
Re: Menu contractil tunait, editar para subopciones dentro de subopcion

hola, y gracias, ya me funciona todo bien, incluso lo he definido por css y me keda ok .

Pero por mejorar, se podria consegir que al hacer click en apartado 1 (me refiero en el ejemplo) si haces click en apartado 2, el apartado 1 vuelva a estar "oculto"

me magino que habrias k definir nuevas variables y k sera un lio pero seria la leche
Gracias

Última edición por farve; 08/01/2007 a las 18:12 Razón: no terminado
  #6 (permalink)  
Antiguo 08/01/2007, 17:28
 
Fecha de Ingreso: marzo-2005
Mensajes: 130
Antigüedad: 19 años, 2 meses
Puntos: 1
Re: Menu contractil tunait, editar para subopciones dentro de subopcion

a se me olvidaba una kosa, se podria hacer, que en el cursor salga la "manita" de windows, como sale cuando ai un enlace?

Última edición por farve; 08/01/2007 a las 18:14 Razón: no terminado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:05.