Atascado con un script

E*M*P*I*C*A*L · #1 (**permalink**) 11/05/2005, 10:40

Hola a todos, estoy haciendo un script para crear unos menús dinámicos que contendran los enlaces para navegar entre diferentes documentos. El caso es que le falta que cuando abra un menú con un clic se cierre otro si esta abierto cosa que después de darle varias vueltas no veo la manera de hacer esto posible. A ver si alguien es capaz de iluminar un poco el camino para conseguir una solución a este problema.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<script>
var M = new Array()//array que contendra los nuevos objetos
var abierto = 0; //variable que indica si el menú esta o no abierto
var retardo = 5; // valor Time de la función setTimeout
var speed = 2; // incemento de count
var nX = 0; // contendra el número de elementos
var caja = 0; // contendra los elementos

function MO(n) 
{
this.is = caja[n];
this.clic = function() 
 {
 with(this)
  {
   if (abierto){left = -100;count = 0;abierto = 0}
   else {left = 0;count = -100;abierto = 1;}
   Mmenu(count, left, n);
  }
 }
}
onload = function() 
{
 divs = document.getElementById("menu");
 caja = divs.getElementsByTagName("div")
 nX = caja.length;
 for (var i=0;i<nX;i++)
  {
   M[i] = new MO(i);
  }
}

function Mmenu(count, left, n) 
{
 if (count!=left)
  {
  if (count>left){count -= speed;}
  else{count += speed;}
  M[n].is.style.left = Math.round(count);
  setTimeout('Mmenu(' + count + ',' + left + ',' + n + ')', retardo);
  }
}
</script>
<style>
a {
text-decoration:none;
font-family:helvetica;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<menu id="menu">
<div onclick=M[0].clic() style="position:absolute;background-image:url(menu.gif);background-repeat:no-repeat;width:120px;height:100%;left:-100px;top:0;">
<br />
-<a href="#"> Capitulo 1</a><br />
-<a href="#"> Capitulo 2</a><br />
-<a href="#"> Capitulo 3</a><br />
-<a href="#"> Capitulo 4</a><br />
-<a href="#"> Capitulo 5</a><br />
-<a href="#"> Capitulo 6</a><br />
-<a href="#"> Capitulo 7</a><br />
<br />
</div>
<div onclick=M[1].clic() style="position:absolute;background-image:url(menu.gif);background-repeat:no-repeat;width:120px;height:100%;left:-100px;top:300px;">
<br />
-<a href="#"> Capitulo 1</a><br />
-<a href="#"> Capitulo 2</a><br />
-<a href="#"> Capitulo 3</a><br />
-<a href="#"> Capitulo 4</a><br />
-<a href="#"> Capitulo 5</a><br />
-<a href="#"> Capitulo 6</a><br />
-<a href="#"> Capitulo 7</a><br />
<br />
</div>
</menu>
</body>
</html>

E*M*P*I*C*A*L · #2 (**permalink**) 13/05/2005, 02:25

Conseguí resolver el problema aunque no estoy muy seguro si la solución que dí al problema es la más elegante o la mejor. Si a alguien se le ocurre otra solución estaría bien que la compartiera :)

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>

<script>
var M = new Array()
var nX = 0;
var caja = 0;
var abierto = 0;
var retardo = 5;
var aX = -100;

function MO(n)
{
this.is = caja[n];
this.clic = function() {
 with(this){
  sel = n;
	if (abierto){Cmenu(aX, sel);abierto = 0}
	else {Amenu(aX, sel);abierto = 1;}
	for (var k=0;k<caja.length;k++)
	 {
	  if (sel!=k)
		 {
	    bX = parseInt(M[k].is.style.left);
	    if (bX==0){Cmenu(aX, k);Amenu(aX, sel);}
		 }
	  }
	}
 }
}
onload = function()
{
 divs = document.getElementById("menu");
 caja= divs.getElementsByTagName("div")
 nX = caja.length;
 for (var i=0;i<nX;i++)
  {
	M[i] = new MO(i);
	}
}

function Amenu (aX, n)
{
 bX =parseInt(M[n].is.style.left)
 if (bX != 0)
  {
	 M[n].is.style.left=bX+2;
	 setTimeout('Amenu(' + aX + ',' + n + ')', retardo);
	}
}

function Cmenu (aX, n)
{
 bX =parseInt(M[n].is.style.left)
 if (bX != aX)
  {
	 M[n].is.style.left=bX-4;
	 setTimeout('Cmenu(' + aX + ',' + n + ')', retardo);
	}
}
</script>
<style>
a {
text-decoration:none;
font-family:helvetica;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<menu id="menu">
<div onclick=M[0].clic() style="position:absolute;background-image:url(menu.gif);background-repeat:no-repeat;width:120px;height:100%;left:-100px;top:0;">
<br />
-<a href="#"> Capitulo 1</a><br />
-<a href="#"> Capitulo 2</a><br />
-<a href="#"> Capitulo 3</a><br />
-<a href="#"> Capitulo 4</a><br />
-<a href="#"> Capitulo 5</a><br />
-<a href="#"> Capitulo 6</a><br />
-<a href="#"> Capitulo 7</a><br />
<br />
</div>
<div onclick=M[1].clic() style="position:absolute;background-image:url(menu.gif);background-repeat:no-repeat;width:120px;height:100%;left:-100px;top:100px;">
<br />
-<a href="#"> Capitulo 1</a><br />
-<a href="#"> Capitulo 2</a><br />
-<a href="#"> Capitulo 3</a><br />
-<a href="#"> Capitulo 4</a><br />
-<a href="#"> Capitulo 5</a><br />
-<a href="#"> Capitulo 6</a><br />
-<a href="#"> Capitulo 7</a><br />
<br />
</div>
<div onclick=M[2].clic() style="position:absolute;background-image:url(menu.gif);background-repeat:no-repeat;width:120px;height:100%;left:-100px;top:200px;">
<br />
-<a href="#"> Capitulo 1</a><br />
-<a href="#"> Capitulo 2</a><br />
-<a href="#"> Capitulo 3</a><br />
-<a href="#"> Capitulo 4</a><br />
-<a href="#"> Capitulo 5</a><br />
-<a href="#"> Capitulo 6</a><br />
-<a href="#"> Capitulo 7</a><br />
<br />
</div>
</menu>
</body>
</html>