Menu contractil tunait, editar para subopciones dentro de subopcion

farve · #1 (**permalink**) 28/12/2006, 10:34

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

tunait · #2 (**permalink**) 29/12/2006, 05:25

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

farve · #3 (**permalink**) 29/12/2006, 11:26

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

tunait · #4 (**permalink**) 29/12/2006, 14:01

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:

farve · #5 (**permalink**) 08/01/2007, 17:26

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

farve · #6 (**permalink**) 08/01/2007, 17:28

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