pagina dhtml e menu css

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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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:

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
hai dato l'id agli elementi <li>?

riposta il codice aggiornato
 

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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

Nuovo Utente
25 Apr 2012
7
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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?
 

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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?

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

Utente Attivo
17 Apr 2012
1.102
0
0
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
 

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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

Avete ragione, scusate: non avevo scritto bene..funziona!
Grazie mille ciric per il tuo prezioso aiuto!
 

kuz1985

Nuovo Utente
25 Apr 2012
7
0
0
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Tutto il sito in un'unica pagina grazie al DHTML...... Javascript 6
napuleone div centrato alla pagina posto sopra ai contenuti HTML e CSS 1
G Eliminare l'effetto refresh di una pagina internet PHP 8
L Bing prima pagina prima riga; Google mi ignora SEO e Posizionamento 0
P Pagina modifica record che non funziona PHP 0
T Conferma reload pagina Javascript 4
A Submit senza ricaricare la pagina Ajax 2
L Problemi form Pagina php HTML e CSS 3
L php mysql cerca e visualizza pagina PHP 0
S Variabile in post su altra pagina PHP 2
D Visualizzazione pagina basata sul valore di un campo del database PHP 2
D Pagina non trovata Wordpress WordPress 7
E Pagina Cloudflare e captcha Domini 1
W Anomalia Pagina Facebook Social Media Marketing 9
A Aiuto per pagina php PHP 0
T Risolto Redirect a pagina esterna Javascript 2
M Questa pagina non carica correttamente Google Maps: aiuto!! HTML e CSS 1
T Offuscare link pagina web PHP 2
D Stampa a video in altra pagina html Database 3
Cosina script data aggiornamento pagina Javascript 1
Y cambiare sfondo di una pagina Javascript 1
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
S Apertura in una nuova pagina PHP 6
G creazione menu a tendina e invio a pagina php PHP 1
B Stampare una porzione della pagina PHP 0
D Pubblicità Instagram su pagina da 144 mila follower Vendere e Acquistare pubblicita' online 2
A Dare l'accesso ad una pagina solo ad un utente specifico PHP 0
F pagina dinamica PHP PHP 3
W Invio Dati ad un altra pagina Classic ASP 1
Samuele Ronzani Click e reload della pagina PHP 1
M Compilazione automatica campi in input stessa pagina PHP 0
C Statistiche pagina Facebook aziendale Social Media Marketing 2
L titolo del sito nella pagina di ricerca di google SEO e Posizionamento 2
MarcoGrazia Pagina canonical SEO e Posizionamento 0
elpirata Update dinamico informazioni scritte in una pagina php jQuery 11
K [CERCO] pagina Instagram Altri Annunci 0
C Vendo pagina FB Presentati al Forum 0
A [CERCO] Pagina Instagram Annunci servizi di Social Media Marketing 1
L Cerco pagina Instagram 1-2k Annunci servizi di Social Media Marketing 4
J creare pagina php di prenotazione PHP 5
Fendo59 Passare parametri con metodo POST a una pagina in un frame PHP 0
Michele95 vendo pagina instagram Annunci servizi di Social Media Marketing 1
B cerco pagina instagram Annunci servizi di Social Media Marketing 6
A [COMPRO] Pagina Instagram Compravendita siti e domini 0
V Cerco pagina Instagram Annunci servizi di Social Media Marketing 1
C Form email php su pagina index.html? PHP 21
L Creare una pagina pre-home WordPress 1
ScofieldMJ [CERCO] Pagina Instagram e Canale Telegram Annunci servizi di Social Media Marketing 0
Cosina Reindirizzare a nuova pagina dopo echo copy PHP 4
A COMPRO PAGINA INSTAGRAM Annunci servizi di Social Media Marketing 1

Discussioni simili