pagina dhtml e menu css

K

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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
 
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/javascript/29031-men-espandibile-usando-js-metodi-dom.html
 
Ultima modifica:
criric ha scritto:
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/javascript/29031-men-espandibile-usando-js-metodi-dom.html
Clicca per allargare...

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
 
hai dato l'id agli elementi <li>?

riposta il codice aggiornato
 
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
 
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;}
 
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

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>
 
Ciao ho visto ora il tuo css

ti è sufficente dare un id ai tag <li>

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?
 
criric ha scritto:
Ciao ho visto ora il tuo css

ti è sufficente dare un id ai tag <li>

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?
Clicca per allargare...

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;}
 
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
 
Nefyt ha scritto:
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
Clicca per allargare...

Avete ragione, scusate: non avevo scritto bene..funziona!
Grazie mille ciric per il tuo prezioso aiuto!
 
salve a tutti, non riapro un nuovo topic visto che il problema che ho strettamente collegato a questo thread..
Praticamente ho cambiato il tipo di menu all'interno della mia pagina dhtml e adesso sono previste delle sottovoci ed è così strutturato:
Codice: 
<div id="content">
<div id="outer">
<ul id="menu">
<li class="current" id="no1"><a href="javascript:Menu(1)">Voce1</a></li>
<li class="sub" id="no2"><a href="javascript:Menu(2)">Voce2</a></li>
<li class="sub" id="no3"><a href="javascript:Menu(3)">Voce3</a></li>
<li class="sub" id="no4"><a href="javascript:Menu(4)">Voce4</a></li>
<li class="sub" id="no5"><a href="javascript:Menu(5)">Voce5</a></li>
<li class="sub" id="no6"><a href="javascript:Menu(6)">Voce6</a></li>
<li class="sub" id="li_1"><a class="down" href="#">Voce7</a></li>
</ul>
</div>


<div id="submenus">
	<ul id="ul_1" class="none">
		<li id="no7"><a href="javascript:Menu(7)">Voce7.1</a></li>
		<li id="no8"><a href="javascript:Menu(8)">Voce7.2</a></li>
</ul>
	
</div>

A questo punto per poter evidenziare di un colore diverso la voce di menu selezionata che visualizza un determinato div id, ho associato la classe current anche ai sottomenu riformulandola così:
Codice: 
#outer ul li.current a, #submenus ul li.current a {background-color:#E8E0FF;}

La funzione javascript invece è quella già gentilmente consiglitami sopra:
Codice: 
function Menu(ID)
{
    var i = 1;
    var max_link = 8;
    for (i=1; i<max_link+1; i++)
    {
        if (ID == i)
        {
            document.getElementById("PG_" + i).style.display = "list-item";
                document.getElementById("no" + i).className = "current";
        }
        else
        {
            document.getElementById("PG_" + i).style.display = "none";
                document.getElementById("no" + i).className = "";
        }
    }
}

Tuttavia, adesso il tutto funziona a met°: nel senso che le voci principali cambiano colore senza problemi mentre le sottovoci cambiano s^ colore quando cliccate ma poi rimangono "accese" anche se clicchi nella sottovoce successiva...sostanzialmente è come se non si disattivassero quando sono visibili altre voci di menu..
sapreste dirmi e spiegarmi, gentilmente, dove sbaglio e perché? grazie mille a tutti
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

M
Tutto il sito in un'unica pagina grazie al DHTML......
Risposte
6
Visite
2K
Javascript
MINDFREE
M
R
Tema per una pagina specifica di un sito
Risposte
2
Visite
262
WordPress
RobertaG
R
F
FINANZIARIO.IT SITO WEB SETTORE FINANZA (AFFILIAZIONI) + PAGINA INSTAGRAM 3.000 FOLLOWER ORG
Risposte
0
Visite
1K
Compravendita siti e domini
finanziario
F
G
Pagina html in stringa
Risposte
2
Visite
2K
PHP
Fra_23
F
L
Creare ancore interne alla pagina
Risposte
1
Visite
1K
PHP
WmbertSea
WmbertSea
F
Aiuto! cambio immagine di sfondo al cambio pagina
Risposte
2
Visite
2K
HTML e CSS
Fabrizio5778
F
Shyson
Regex che trova la parola nella pagina
Risposte
6
Visite
2K
jQuery
Shyson
Shyson
L
Eliminazione di una pagina dalla gallery
Risposte
0
Visite
2K
SEO e Posizionamento
lessico
L
D
Apre il lightbox fuori pagina
Risposte
0
Visite
976
Javascript
djjunior
D
K
posizionare variabile da pagina html all'iframe.
Risposte
1
Visite
1K
Javascript
WmbertSea
WmbertSea
R
jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax
Risposte
5
Visite
2K
Ajax
robyspider77
R
U
Link a pagina ed esecuzione file
Risposte
0
Visite
950
PHP
Umberto Federico
U
S
  • Bloccata
Passare query o utm alla pagina successiva
Risposte
1
Visite
1K
Domini
Max 1
Max 1
D
[Cerco] Pagina Facebook settore calcio
Risposte
0
Visite
5K
Annunci servizi di Social Media Marketing
Dptm11
D
napuleone
  • Bloccata
div centrato alla pagina posto sopra ai contenuti
Risposte
1
Visite
2K
HTML e CSS
Max 1
Max 1
G
Eliminare l'effetto refresh di una pagina internet
Risposte
8
Visite
2K
PHP
giuliox13
G
L
Bing prima pagina prima riga; Google mi ignora
Risposte
0
Visite
1K
SEO e Posizionamento
lessico
L
P
Pagina modifica record che non funziona
Risposte
0
Visite
1K
PHP
precogcris
P
T
Conferma reload pagina
Risposte
4
Visite
2K
Javascript
thanatos
T
A
Submit senza ricaricare la pagina
Risposte
2
Visite
4K
Ajax
MarcoGrazia
MarcoGrazia
Alto Basso