Menu e sottomenu

**Alex75** · 20-08-2008, 12:34

Ho tre menu e tre sottomenu del tipo:

menu1 menu2 menu3

Al cliccare su menu1 mi deve visualizzare un sottomenu, al cliccare su menu2 mi deve nascondere menu1 e visualizzare menu2.

Il codice utilizzato è il seguente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu orizzontale dinamico in Dhtml</title>

<script language="javascript">

var i = 1

function HideDiv(ID){
document.getElementById(ID).style.display='none';
}
unction ShowDiv(ID){

document.getElementById(ID).style.display='none';
parametro="sottomenu"+i
While(i<3;i++){if (ID=parametro){i++;parametro="sottomenu"+i}
HideDiv(parametro)}
}

</script>
</head>

<body>
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
MENU # 1
MENU # 2
MENU # 3
</div>

<div id="sottomenu1" style="left: 1px; display: none">
Pagina # 1

Pagina # 2

Pagina # 3

</div>

<div id="sottomenu2" style="left: 81px;
position: absolute; top: 38px; display: none">
Pagina # 4

Pagina # 5

Pagina # 6

</div>

<div id="sottomenu3" style="left: 157px;
position: absolute; top: 38px; display: none">
Pagina # 7

Pagina # 8

Pagina # 9

</div>

</body>

</html>

ebbene non funziona
I sottomenu sono tutti e tre hidden e rimangono tali indipendentemente da qualunque azione compia.

**br1** · 20-08-2008, 12:53

Ad una occhiata superficiale i primi tre errori:

unction ShowDiv(ID){

While(i<3;i++)

if (ID=parametro)

Fai piu' attenzione, sicuramente ce ne sarranno anche altri...

**Alex75** · 20-08-2008, 13:31

a parte il primo errore, quali sono gli altri due, scusami tanto

**Alex75** · 20-08-2008, 13:47

Scusami. Ho corretto così il codice e ho sempre lo stesso risultato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Menu orizzontale dinamico in Dhtml</title>

<script language="javascript">

var i = 1

function HideDiv(elemento){
document.getElementById(ID).style.display='none';
}
function ShowDiv(ID){

document.getElementById(ID).style.display='';
parametro="sottomenu"+i
For (i<3;i++){if (ID==parametro){i++;parametro="sottomenu"+i}
HideDiv(parametro)}
}

</script>
</head>

<body>
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
MENU # 1
MENU # 2
MENU # 3
</div>

<div id="sottomenu1" style="left: 1px; display: none">
Pagina # 1

Pagina # 2

Pagina # 3

</div>

<div id="sottomenu2" style="left: 81px;
position: absolute; top: 38px; display: none">
Pagina # 4

Pagina # 5

Pagina # 6

</div>

<div id="sottomenu3" style="left: 157px;
position: absolute; top: 38px; display: none">
Pagina # 7

Pagina # 8

Pagina # 9

</div>

</body>

</html>

**br1** · 20-08-2008, 18:40

For (i<3;i++){

Non puoi invertarti la sintassi e poi chiedere agli altri che ti sistemino i pasticci... per queste sciocchezze consulta un reference e ragionaci sopra, senza esagerare con il forum e il tempo libero degli altri... che prima o poi, se non vedono l'impegno, si stancano

ciao

**Alex75** · 20-08-2008, 18:44

Salve ho creato un programma (funzionante) di questo tipo

ho tre menu'

menu1 menu2 menu3

Ad ognuno corrisponde un sottomenu'. Per cui cliccando su menu1 visualizzo il sottomenu1 e così via.
Se mi sposto da menù 1 a menù 2 scompare il sottomenu1 e appare il sottomenu2. Così se mi sposto dal menu2 al menu3
Adesso vi scrivo il codice delle funzioni che consentono la comparsa e scomparsa dei <div> dei sottomenu:
<script language="javascript">
function HideDiv(elemento){

document.getElementById(elemento).style.display='n one';
}

function ShowDiv(ID){

document.getElementById(ID).style.display=''";

for(i=1;i<4;i++){parametro="sottomenu"+i;if (ID==parametro)//il sottomenù sopra al quale {i++;parametro="sottomenu"+i} //si trova il mouse deve essere
HideDiv(parametro)} //visibile, mentre gli altri due li
} //nascondo

</script>

Ora questo codice funziona
Pero' prima la funzione ShowDiv[ID]
la scrivevo così e non funzionava:
function ShowDiv(ID){
var i = 1
document.getElementById(ID).style.display='';

While(i<4){parametro="sottomenu"+i;if (ID==parametro) {i++;parametro="sottomenu"+i}
HideDiv(parametro);i++}

}

---------------------------------
L'unica differenza è che nel primo ho usato il ciclo for nel secondo esempio ho usato while.
Ebbene il primo funziona il secondo no, ma non capisco perchè.
Col secondo l'effetto è che i sottomenu sono tutti e tre nascosti come di default

p.s. per completezza vi scrivo il resto del codice:

<body>
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
MENU # 1
MENU # 2
MENU # 3
</div>

<div id="sottomenu1" style="left: 1px; display: none">
Pagina # 1

Pagina # 2

Pagina # 3

</div>

<div id="sottomenu2" style="left: 81px;
position: absolute; top: 38px; display: none">
Pagina # 4

Pagina # 5

Pagina # 6

</div>

<div id="sottomenu3" style="left: 157px;
position: absolute; top: 38px; display: none">
Pagina # 7

Pagina # 8

Pagina # 9

</div>

</body>

</html>

**Alex75** · 20-08-2008, 19:31

while l'ho corretto e scritto minuscolo, ma non va lo stesso.
Non funziona la funzione HideDiv

**pietro09** · 20-08-2008, 19:56

vedi se va

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Pagina senza titolo</title>

    <script language="javascript" type="text/javascript">
// <!CDATA[

function HideDiv(elemento)
{
    document.getElementById(elemento).style.display = 'none';
}

function ShowDiv(ID)
{
    document.getElementById(ID).style.display = '';

    /*
    for(var i = 1; i < 4; i++)
    {
        parametro = "sottomenu" + i;
        if (ID != parametro) HideDiv(parametro);
    }
    */
    var i = 1;
    while(i < 4)
    {
        parametro = "sottomenu" + i++;
        if (ID != parametro) HideDiv(parametro);
    }

}
// ]]>
</script>

</head>
<body>
<div style="background-color: #EEEEEE; border-bottom: Solid 1px #000000;">
MENU # 1
MENU # 2
MENU # 3
</div>




<div id="sottomenu1" style="left: 1px; display: none">
Pagina # 1

Pagina # 2

Pagina # 3


</div>

<div id="sottomenu2" style="left: 81px;
position: absolute; top: 38px; display: none">
Pagina # 4

Pagina # 5

Pagina # 6

</div>


<div id="sottomenu3" style="left: 157px;
position: absolute; top: 38px; display: none">
Pagina # 7

Pagina # 8

Pagina # 9


</div>
</body>
</html>

**Alex75** · 20-08-2008, 22:36

Ti ringrazio il tuo codice va benissimo e come al solito giungi in mio soccorso con successo.

Il problema principale (oltre al fatto che il tuo codice è più snello del mio) è che bisognava inizializzare la variabile i all'interno della funzione cosa che io non facevo.
Non so perchè, ma quando inizializo la variabile come globale il codice non mi da risultato.
Tu me lo sapresti dire? Probabilmente c'è un problema di sovrascrittura.

Comunque sia ti ringrazio per la tua pazienza

**very46** · 01-11-2008, 23:22

non riesco a far funzionare questo script nè con firefox nè safari, potete aiutarmi per favore? oltre all'effetto sulla voce di menu, ho associato un effetto su un'immagine che invece funziona correttamente. Questo è un esempio di voce di menu:

<a href="java-script:void(0)" onMouseOver="ShowDiv('sottomenu1')" id="principale">
[img]img.jpg[/img]VOCE MENU</a>

E lo stile definisce questo:

img.menu {
width:50px;
height:50px;
border:none;
}

#principale {
color:#a1e3c8;
text-decoration: None;
}

#principale:hover {
color:#000000;
text-decoration:none;
background-color:#5ca88a;
}

Problema di compatibilità con il CSS? Il controllo con il validator mi ha dato l'ok..
Grazie!

Discussione: Menu e sottomenu

Strumenti discussione

Ricerca discussione

Visualizza

Menu e sottomenu

For oppure While

problemi su questo script

Permessi di invio