pagina dhtml e menu css

**kuz1985** · 25-04-2012, 14:01

Salve a tutti,
ho creato una pagina dhtml sulla base dello schema illustrato nel presente sito: ho quindi creato una serie di <div id> invisibili che al variare della voce di menu cliccata diventano visibili grazie al codice javascript

Codice:

<script type="text/javascript">
function Menu(ID)
{
    var i = 1;
    var max_link = 5;
    for (i=1; i<max_link+1; i++)
    {
        if (ID == i)
        {
            document.getElementById("PG_" + ID).style.visibility = "visible";
            document.getElementById("PG_" + ID).style.position = "relative";
        }
        else
        {
            document.getElementById("PG_" + i).style.visibility = "hidden";
            document.getElementById("PG_" + i).style.position = "absolute";
        }
    }
}
</script>

Ho quindi creato il menu e associato a ciascuna voce la relativa funzione:

Codice:

<div id="menu">
	<ul>
		<li>
			<a href="javascript:Menu(1)">voce1</a>
		</li>
		<li>
			<a href="javascript:Menu(2)">voce2</a>
		</li>
		<li>
			<a href="javascript:Menu(3)">voce3</a>
		</li>
		<li>
			<a href="javascript:Menu(4)">voce4</a>
		</li>
        <li>
			<a href="javascript:Menu(5)">voce5</a>
</li>
        </ul>
</div>

Quello che vorrei è riuscire ad evidenziare la voce di menu attiva rispetto alle altre in modo che quando risulta visibile il div associato anche la voce di menu risulti di un colore diverso rispetto alle altre.
Così avevo pensato di inserire nel foglio di stile css

Codice:

li.current a{ background-color:#DDDDDD;}

e alla voce 1 la relativa classe

Codice:

<li class="current">

A questo punto per poter consentire anche alle altre voci di essere evidenziate non appena vengono cliccate, ho pensato che dovrei lavorare sul codice javascript e pertanto ho pensato di inserire alla funzione menu(iD) sopra evidenziata anche il presente codice

Codice:

document.getElementById(ID).className = 'current';

ma non funziona..
cosa sbaglio? è giusto il ragionamento che ho fatto? grazie a tutti per i consigli

**criric** · 26-04-2012, 08:45

Ciao,
il ragionamento mi pare giusto, questa sintassi no

Codice:

document.getElementById(ID).className = 'current';

dovrebbe essere cosi

Codice:

document.getElementById("PG_" + ID).style.className = 'current';

in piu nel ciclo dovresti annullare la classe agli altri elementi

Codice:

else
document.getElementById("PG_" + ID).style.className = '';

PS: guarda anche questa discussione
http://forum.mrwebmaster.it/javascri...etodi-dom.html

**kuz1985** · 26-04-2012, 10:39

Originariamente Scritto da criric

Ciao,
il ragionamento mi pare giusto, questa sintassi no

Codice:

document.getElementById(ID).className = 'current';

dovrebbe essere cosi

Codice:

document.getElementById("PG_" + ID).style.className = 'current';

in piu nel ciclo dovresti annullare la classe agli altri elementi

Codice:

else
document.getElementById("PG_" + ID).style.className = '';

PS: guarda anche questa discussione
http://forum.mrwebmaster.it/javascri...etodi-dom.html

Grazie dell'aiuto, in effetti quelle correzioni che mi hai fatto mi sembrano giuste, tuttavia ancora non funziona. la classe "current" continua ad essere associata alla "voce 1" a prescindere dalla voce di menu che clicco (

Codice:

<li class="current">
			<a href="javascript:Menu(1)">voce1</a>
		</li>

).
In cosa posso aver sbagliato?
Grazie mille

**criric** · 26-04-2012, 10:41

hai dato l'id agli elementi <li>?

riposta il codice aggiornato

**kuz1985** · 26-04-2012, 11:01

Codice:

<div id="menu">
	<ul>
		<li class="current">
			<a href="javascript:Menu(1)">voce1</a>
		</li>
		<li class="current">
			<a href="javascript:Menu(2)">voce2</a>
		</li>
		<li class="current">
			<a href="javascript:Menu(3)">voce3</a>		
</li>
		<li class="current">
			<a href="javascript:Menu(4)">voce4</a>
		</li>
        <li class="current">
			<a href="javascript:Menu(5)">voce5</a>
</li>
</ul>

penso che ci sia qualcosa di sbagliato nel css forse

**kuz1985** · 26-04-2012, 11:04

lo script css che avevo recuperato da un sito era questo:

Codice:

		#menu{
		width:100%;
		background-color:#373737;
		}
		/*stile generale delle liste*/
		#menu ul{
		margin:0;
		padding:0;
		position: relative;
		height: 30px;
		width:100%;
		}
		/*stile generale delle sub liste*/
		#menu ul ul{
		position: absolute;
		top:30px;
		left: 0;
		visibility: hidden;
		}
		/*stile generale dei list item*/
		#menu li{
		list-style: none;
		float: left;
		padding:0 5px;
		background-color:#373737;
		}
		#menu ul, #menu li{
		background-color:#373737;
		}
		#menu ul ul, #menu li li{
		background-color:#767676;
		}
		#menu ul ul ul, #menu li li li{
		background-color:#DDDDDD;
		}
		
		/*style generale dei link*/
		#menu a{
		display:block;
		float:left;
		padding:0 30px;
		text-decoration:none;
		text-align: center;
		line-height: 30px;	
		font-family: Verdana;
		font-size: 9px;
		font-weight: bold;
		}
		/*style generale dei link sullo stato hover*/
		#menu ul :hover > a, #menu ul a:hover{
		height:20px;
		border-top:5px solid #373737;
		border-bottom:5px solid #373737;
		line-height:20px;
		}
		#menu ul :hover > a.sub{
		height:25px;
		border-bottom:none;
		line-height:20px;
		}
		/*stile link primo livello*/
		#menu ul a{
		color:#FFFFFF;
		}		
		#menu ul :hover > a{
		background-color:#767676;
		border-color:#373737;
		color:#FFCC00;
		} 	
		/*stile link secondo livello*/
		#menu ul ul a{
		color:#FFCC00;
		}	
		#menu ul ul :hover > a{
		background-color:#DDDDDD;
		border-color: #767676;
		color:#336699;
		}	
		/*stile link terzo livello*/
		#menu ul ul ul a{
		color:#336699;	
		}
		#menu ul ul ul :hover > a{
		background-color:#FFF;
		border-color:#DDDDDD;
		}	
		/*secondo livello visibile su hover del primo livello*/
		#menu ul li:hover ul, #menu ul a:hover ul{
		visibility:visible;
		}
		/*terzo livello invisibile su hover del primo livello*/
		#menu ul li:hover ul ul, #menu ul a:hover ul ul{
		visibility:hidden;
		}
		/*terzo livello visibile su hover del secondo livello*/
		#menu ul ul li:hover ul, #menu ul ul a:hover ul{
		visibility:visible;
		}
		/*style per Internet Explorer 6*/
		#menu table {
		position:absolute; 
		border-collapse:collapse; 
		top:0; 
		left:0;
		width:100%;
		}
		#menu a:hover{
		height:20px;
		border-top:5px solid #373737;
		border-bottom:5px solid #373737;
		line-height:20px;
		}
		#menu ul a.sub:hover{
		height:25px;
		border-bottom:none;
		line-height:20px;
		}
		#menu ul a:hover{
		background-color:#767676;
		border-color:#373737;
		color:#FFCC00;
		} 
		#menu ul ul a:hover{
		background-color:#DDDDDD;
		border-color: #767676;
		color:#336699;
		}
		#menu ul ul ul a:hover{
		background-color:#FFF;
		border-color:#DDDDDD;
		}

A cui ho aggiunto

Codice:

li.current a{ background-color:#DDDDDD;}

**criric** · 26-04-2012, 11:09

per la sintassi ho sbagliato deve essere cosi:

Codice:

document.getElementById("LI_" + i).className = "current";

prova a fare qualcosa del genere usando display anziche visibility

Codice HTML:

<script type="text/javascript">
    function Menu(ID)
    {
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("PG_" + i).style.display = "list-item";
                document.getElementById("LI_" + i).className = "current";
            }
            else
            {
                document.getElementById("PG_" + i).style.display = "none";
                document.getElementById("LI_" + i).className = "";
            }
        }
    }
</script>

<style type="text/css">
    li.current a{ background-color:#DDDDDD;}
</style>
<div id="menu">
    <ul>
        <li id="LI_1">
            <a href="javascript:Menu(1)">voce1</a>
            <ul style="display:none" id="PG_1">
                <li>Sottomemenu 1</li>
            </ul>
        </li>
        <li id="LI_2">
            <a href="javascript:Menu(2)">voce2</a>
            <ul style="display:none" id="PG_2">
                <li>Sottomemenu 2</li>
            </ul>
        </li>
    </ul>
</div>

**criric** · 26-04-2012, 11:30

Ciao ho visto ora il tuo css

ti è sufficente dare un id ai tag <li>

Codice HTML:

<div id="menu">
    <ul>
        <li id="LI_1">
            <a href="javascript:Menu(1)">voce1</a>
        </li>
        <li id="LI_2">
            <a href="javascript:Menu(2)">voce2</a>
        </li>
        <li id="LI_3">
            <a href="javascript:Menu(3)">voce3</a>		
        </li>
        <li id="LI_4">
            <a href="javascript:Menu(4)">voce4</a>
        </li>
        <li id="LI_5">
            <a href="javascript:Menu(5)">voce5</a>
        </li>
    </ul>
</div>

funzione javascript aggiungi la className

Codice:

 function Menu(ID)
    {
       
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("LI_" + i).className = "current";
            }
            else
            {
                document.getElementById("LI_" + i).className = "";
            }
        }
    }

ma i div nascosti dove sono?

**kuz1985** · 26-04-2012, 12:07

Originariamente Scritto da criric

Ciao ho visto ora il tuo css

ti è sufficente dare un id ai tag <li>

Codice HTML:

<div id="menu">
    <ul>
        <li id="LI_1">
            <a href="javascript:Menu(1)">voce1</a>
        </li>
        <li id="LI_2">
            <a href="javascript:Menu(2)">voce2</a>
        </li>
        <li id="LI_3">
            <a href="javascript:Menu(3)">voce3</a>		
        </li>
        <li id="LI_4">
            <a href="javascript:Menu(4)">voce4</a>
        </li>
        <li id="LI_5">
            <a href="javascript:Menu(5)">voce5</a>
        </li>
    </ul>
</div>

funzione javascript aggiungi la className

Codice:

 function Menu(ID)
    {
       
        var i = 1;
        var max_link = 5;
        for (i=1; i<max_link+1; i++)
        {
            if (ID == i)
            {
                document.getElementById("LI_" + i).className = "current";
            }
            else
            {
                document.getElementById("LI_" + i).className = "";
            }
        }
    }

ma i div nascosti dove sono?

Ci sono ma non li ho inseriti perchè li ritenevo superflui ai fini della soluzione del problema.
Ti tingrazio per l'aiuto ma anche associando un id al tag li di ciascuna voce di menu e implementando nel senso da te indicato la funzione javascript il problema non è affatto risolto.
Secondo me la sintassi nel codice css non è del tutto corretta..a questo punto credo che sia l'unico motivo per cui non funzioni:

Codice:

li.current a{ background-color:#DDDDDD;}

**Nefyt** · 26-04-2012, 13:48

Io ho provato in locale il codice di criric e funziona perfettamente O.ò, quindi o hai sbagliato qualcosa prima nel css o negli script prima

Codice:

li.current a{ background-color:#DDDDDD;}

Questa sintassi è corretta non vedo il problema

Discussione: pagina dhtml e menu css

Strumenti Discussione

Visualizzazione

pagina dhtml e menu css

Tag per Questa Discussione

Permessi di Scrittura