Modifiche a menuin JS

**Peter_Pan** · 12-05-2004, 17:30

Ragazzi sapreste aiutarmi a modificare questo menu?? Come è ora funziona benissimo, è un menu laterare, clicco su una voce principale e si espande il menu, io vorrei che quando clicco una voce mi si chiudano tutte le altre, ma non so come modificarlo, vi posto il codice completo, vedete se potete aiutarmi.

Grazie

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.testoP {
	font-family: Tahoma;
	font-size: 9pt;
	color: #FFFFFF;
	font-weight: bold;
	text-indent: 3pt;
}
.testoS {
	font-family: Tahoma;
	font-size: 8pt;
	color: #003063;
	font-weight: bold;
	text-indent: 5pt;
}
-->
</style>

<SCRIPT LANGUAGE=javascript>

function visualizza(numTab, numMaxArray)	{
	strTab = numTab;
	strNumArray = numMaxArray
	var arrayTab = new Array();
	
	for (n = 0; n < strNumArray; n++)
		{
		arrayTab[n] = strTab+"_"+(n+1);
		}
	
	for (i = 0; i < strNumArray; i++)
		{
    	strTabCambia = document.getElementById(arrayTab[i]);
		old = strTabCambia.style.display;
		strTabCambia.style.display = "block";
		if (old=="block")
		{
			strTabCambia.style.display = "none";
		}
	}
}
</SCRIPT>

</head>

<body onLoad="visualizza('tab1', 3)">


</p>
<table width="130" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td bgcolor="#3B4866" width="130" height="22"></td>
  </tr>
  <tr> 
    <td width="130" height="23" bgcolor="#7489B9" class="testoP" style="Cursor:Hand" onClick="visualizza('tab1', 3)"> Primo 
      Tab </td>
  </tr>
  <tr id="tab1_1" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Primo Tab </td>
  </tr>
  <tr id="tab1_2" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Primo Tab </td>
  </tr>
  <tr id="tab1_3" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Primo Tab </td>
  </tr>
  <tr> 
    <td width="130" height="23" bgcolor="#7489B9" class="testoP" style="Cursor:Hand" onClick="visualizza('tab2', 3)"> 
      Secondo Tab </td>
  </tr>
  <tr id="tab2_1" style="display:none">
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Secondo Tab </td>
  </tr>
  <tr id="tab2_2" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Secondo Tab </td>
  </tr>
  <tr id="tab2_3" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Secondo Tab </td>
  </tr>
  <tr>
    <td width="130" height="23" bgcolor="#7489B9" class="testoP" style="Cursor:Hand" onClick="visualizza('tab3', 3)"> 
      Terzo Tab </td>
  </tr>
  <tr id="tab3_1" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Terzo Tab </td>
  </tr>
  <tr id="tab3_2" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Terzo Tab </td>
  </tr>
  <tr id="tab3_3" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Terzo Tab </td>
  </tr>
  <tr>
    <td width="130" height="23" bgcolor="#7489B9" class="testoP" style="Cursor:Hand" onClick="visualizza('tab4', 1)"> 
      Quarto Tab </td>
  </tr>
  <tr id="tab4_1" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quarto Tab </td>
  </tr>
  <tr>
    <td width="130" height="23" bgcolor="#7489B9" class="testoP" style="Cursor:Hand" onClick="visualizza('tab5', 5)"> 
      Quinto Tab </td>
  </tr>
  <tr id="tab5_1" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quinto Tab </td>
  </tr>
  <tr id="tab5_2" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quinto Tab </td>
  </tr>
  <tr id="tab5_3" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quinto Tab </td>
  </tr>
  <tr id="tab5_4" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quinto Tab </td>
  </tr>
  <tr id="tab5_5" style="display:none"> 
    <td width="130" height="17" bgcolor="#C6D4F5" class="testoS" style="Cursor:Hand" onClick="alert('ok')"> 
      Quinto Tab </td>
  </tr>
  <tr> 
    <td width="130" height="25" bgcolor="#3B4866"></td>
  </tr>
</table>
</body>
</html>

**Peter_Pan** · 13-05-2004, 11:23

up:
nessuno mi sa dare una mano?? per vedere il menu basta copiare tutto il codice in una pagina vuota.

Il codice javascript è piccolo e semplice. Tutto il resto che vedete è html, quindi non spaventatevi se vedete tutto quel codice.

AIUTO

**Xinod** · 13-05-2004, 15:04

ti crea problemi usare le liste invece di tabelle o righe di tabella?
lo script che stai usando è molto + farraginoso di quel che potrebbe usando le liste

**Peter_Pan** · 13-05-2004, 22:49

Cosa sono le liste?? cmq l'importante che funzioni, hai qualche esempio??

**Mich_** · 14-05-2004, 09:03

Le liste in HTML vengono introdotte dai tag <ul> oppure [list=1];
i vari elementi vengono racchiusi tra[*] e

**Peter_Pan** · 14-05-2004, 17:31

ahhh io li chiamo elenchi, no se si riesce ad ottenere lo stesso effetto, mi posti qualche esempio??

**Xinod** · 14-05-2004, 22:16

x es leggi qui

se decidi che va bene farlo così ti scrivo le modifiche per far chiudere ad ogni click gli altri sottomenù eventualmente aperti,
ora non ho proprio tempo

**Peter_Pan** · 17-05-2004, 10:52

si va bene quando hai tempo mi puoi fare la modifica per far chiudere gli altri rami??

Grazie

**Xinod** · 18-05-2004, 10:25

c' è la modifica già pronta nella pagina di commenti allo script stesso,
basta sostituire la funzione mmenu con

codice:

function mmenu(mID) { 
	var menu = document.getElementById(mID); 
	var display = menu.style.display; 
	menu.style.display = (display == "block") ? "none" : "block"; 

	var nodoUL=menu.parentNode.parentNode; 
	var nodo=nodoUL.childNodes; 

	for (var i=0;i<nodo.length;i++) { 
		if ((nodo[i].tagName=="LI")&&(nodo[i].hasChildNodes())) { 
			for (var j=0;j<nodo[i].childNodes.length;j++) { 
				if((nodo[i].childNodes[j].tagName=="UL")&&(nodo[i].childNodes[j].id!=mID)) { 
					nodo[i].childNodes[j].style.display="none"; 
				} 
			} 
		} 
	} 
}

ciao

**Peter_Pan** · 18-05-2004, 11:44

Va bene così
Grazie 1000

Discussione: Modifiche a menuin JS

Strumenti discussione

Ricerca discussione

Visualizza

Modifiche a menuin JS

Cosa???

ok

Grazie

Permessi di invio