menu a scomparsa. funzione che nasconda tutte le tendine

[i_am_antipop]

Ciao, ho un menu a scomparsa. Al click sul menu 1 viene visualizzato il sub menu 1, e così via per il 2, ecc... Vorrei che cliccando su un menu qualsiasi, vengano nascosti tutti gli altri (in modo da averne sempre e solo uno aperto)

potete darmi una dritta?
grazie!

La funzione che regola la visibilità è questa:

<script language="JavaScript" type="text/javascript">
<!--
function showHide(aDiv) {
aDiv.className = aDiv.className == "hidden" ? "shown" : "hidden";
} // function showHide(aDiv)
//-->
</script>


e il menu è questo:

<table align="center" width="955" cellpadding="0" >
<tr>
<td valign="top" width="189">
<div style="width:252px" class="mainMenu" onclick="showHide(document.getElementById('subMenu 1'))">
<div align="center">Menu1</div>
</div>
<div id="subMenu1" class="hidden">
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 4</div>
</div>


<div style="width:252px" class="mainMenu" onclick="showHide(document.getElementById('subMenu 2'))">
<div align="center">Menu2</div>
</div>
<div id="subMenu2" class="hidden">
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 222</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 4</div>
</div>


<div style="width:252px" class="mainMenu" onclick="showHide(document.getElementById('subMenu 3'))">
<div align="center">Menu3</div>
</div>
<div id="subMenu3" class="hidden">
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 1</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 2</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 3</div>
<div style="width:252px" class="subMenu" onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor='white'">
Voce 4</div>
</div>
</td> </tr>
</table>

[i_am_antipop]

Pensavo.. al click, per attribuisco la casse hidden a tutti i layer.
..poi mostro quello selezionato. solo che c'è l'errore.. oggetto non valido...

qual'è la sintassi corretta per identificare ciascun div?

tnx

Es: (ma sbaglio la sintassi )

<script language="JavaScript" type="text/javascript">
<!--
function showHide(aDiv) {

// mia Prova
	document.submenu1.className = "hidden";
	document.submenu2.className = "hidden";
	document.submenu3.className = "hidden";


 
 aDiv.className = aDiv.className == "hidden" ? "shown" : "hidden";
} // function showHide(aDiv)
//-->
</script>

[Mich_]

Provo a tentare di indovinare quello che volevi fare. Ecco una sintassi corretta:
document.getElementById('ID_DEL_DIV').style.visbil ity='hidden';

[i_am_antipop]

Grazie mille! Ho modificato così il tuo script:


document.getElementById('subMenu1').className="hid den";
document.getElementById('subMenu2').className="hid den";
etc..

e funziona!!

grazie ancora!

[Mich_]

No, quello e` sbagliato.
hidden e` una keyword di visibility, non di className.

Se invece e` il nome di una classe, cambialo: non conviene usare keywords come nomi di classi od altri oggetti

[i_am_antipop]

ok, allora cambio il nome della classe

<style type="text/css">
<!--
.hideit {display:none} //era hidden
.shown {display:block}
.mainMenu {color:white;background-color:navy;font-size:9pt;font-family:verdana;cursor:hand}
.subMenu {color:navy;background-color:white;font-style:none;font- -->
</style>


grazie!

[i_am_antipop]

Ora vorrei far si che cambi il colore del div mainMenu...

onClick:
a) primo click: mostra il sottomenu e cambia colore.
b) secondo click: nascondi sottomenu e ripristna colore.

onMouseOver e onMouseOut:
se non c'è click, allora camba il colore.


Ho associato le seguenti funzioni al MENU 2... ma non funziona...
se qualcuno puà dare un occhiata, Grazie.



<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

//over
function checkColor2(aDiv) {
if (aDiv.style.backgroundColor=="cccccc"){
aDiv.style.backgroundColor="95B1FF";
}else{
if (aDiv.style.backgroundColor=="ffffff"){
aDiv.style.backgroundColor="ffffff";
}
}
}

//out
function checkColor3(aDiv) {
if (aDiv.style.backgroundColor=="FFFFFF"){
aDiv.style.backgroundColor="FFFFFF";
}else{
if (aDiv.style.backgroundColor=="95B1FF"){
aDiv.style.backgroundColor="cccccc";
}
}
}
//click
function checkColor1(aDiv) {
if (aDiv.style.backgroundColor=="95B1FF"){
aDiv.style.backgroundColor="95B1FF";
}else{
if (aDiv.style.backgroundColor=="cccccc"){
aDiv.style.backgroundColor="95B1FF";
}
}
}

function showHide(aDiv) {
aDiv.className = aDiv.className == "hideit" ? "shown" : "hideit";

}
//-->
</script>
<style type="text/css">
<!--
.hideit {display:none; background-color: 3E1818}
.shown {display:block}
.mainMenu {color:black;background-color:cccccc;font-size:9pt;font-family:arial;cursor:hand}
.subMenu {color:navy;background-color:white;font-style:none;font-size:9pt;font-family:verdana;cursor:hand}
-->
</style>
</head>
<body bgcolor="#FFFFFF" vlink="01166F" alink="01166F">
<table width="99%" border="0" cellspacing="0" cellpadding="1" align="center">
<tr>
<td height="1" width="1"></td>
<td height="10"></td>
</tr>
<tr>
<td height="0" width="1"></td>
<td><span class="testoNews">MENU</span><span class="testoTitolo"></span></td>
</tr>
<tr>
<td height="0" width="1"></td>
<td>
<div style="width:195px;height:18px" class="mainMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='cccccc'" onClick="showHide(document.getElementById('subMenu 1'))">
<div align="left">menu 1</div>
</div>
<div id="subMenu1" class="hideit">
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciaociao</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
come va</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
tutto bene</div>
</div>
<div id="main2" style="width:195px;height:18px" class="mainMenu" onMouseOver="checkColor2(document.getElementById(' main2'))" onMouseOut="checkColor3(document.getElementById('m ain2'))" onClick="checkColor1(document.getElementById('main 2'));showHide(document.getElementById('subMenu2')) ;return true">
<div align="left">menu 2</div>
</div>
<div id="subMenu2" class="hideit">
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciao1</div>
<div style="width:195px;height:18px" class="subMenu" onMouseOver="this.style.backgroundColor='95B1FF'" onMouseOut="this.style.backgroundColor='white'">
ciao2</div>
</div>
</td>
</tr>
</table>
<div align="center"></div>
</body>
</html>

[i_am_antipop]

Ciao, sto risolvendo così (ma x ora funziona solo se rendo attivo un solo main menu):

//al click il menu si attiva e mantiene il colore azzurro del rollover anche se il mouse esce; al secondo click di chiusura ritorna il grigio.

<script language="JavaScript" type="text/javascript">
<!--
//click

selez=false;
function checkColor1(aDiv) {
if (selez==true){
aDiv.style.backgroundColor="ffffff";
selez=false;
}else{
aDiv.style.backgroundColor="95B1FF";
selez=true;
}
}

//over
function checkColor2(aDiv) {
if (selez==true){
aDiv.style.backgroundColor="95B1FF";

}else{
aDiv.style.backgroundColor="95B1FF";

}
}

//out
function checkColor3(aDiv) {
if (selez==true){
aDiv.style.backgroundColor="95B1FF";

}else{
aDiv.style.backgroundColor="cccccc";

}
}

function showHide(aDiv) {
aDiv.className = aDiv.className == "hideit" ? "shown" : "hideit";

}
//-->
</script>