Discussion :

[pop_up]

Bonjour,

J'ai un menu qui a des sous menus.

J'aimerai que la rubrique cliquée soit surlignée. Ma classe selected me sert à ça. Mais le problème est que si je clique sur un des sous lien du "lien 2", toute la rubrique du lien 2 reste surlignée alors que je voudrai que juste le sous lien le soit.

Pourriez vous m'aider ?

j'ai un code qui ressemble à ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<ul>
	<li>titre
		<ul>
			<li id="mg1" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#" >lien 1</a></li>
 
 
			<li id="mg2" onclick="javascript:initMenuGauche();this.className='selected'">lien 2</a>
			<div id="sMenu1">
				<ul class="smenuGauche">
					<li id="mg3" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2</a></li>
 
					<li id="mg4" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-1</a></li>
					<li id="mg5" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-2</a></li>
					<li id="mg6" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-3</a></li>
					<li id="mg7" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#">sous lien 2-4</a></li>
				</ul>
			</div>
 
			</li>
			<li id="mg8" onclick="javascript:initMenuGauche();this.className='selected'"><a href="#" >lien 3</a></li>
		</ul>
	</li>
</ul>

et la fonction initMenuGauche est la suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
function initMenuGauche() {
    // Initialisation des menus de gauche et de droite 
    for ( i=1 ; i<9 ; i++) {
		if (document.getElementById('mg'+i)) {
        	document.getElementById('mg'+i).className = '';
		}
    }
    return 0;
}

merci

[le_chomeur]

houla houla , des div a l'intérieur de li , puis des li ?
va faire un tour par ici :

http://css.developpez.com/galerie/

[pop_up]

On peut trés bien mettre des li dans des div et inversement et etant valide XHTML

le div me sert a cacher le sous menu en javascript dans certains cas.

Mais pour ce probleme, j'ai beau chercher, je vois pas.

[Auteur]

bonjour,

ne mets pas le this.className sur les balises <li> mais sur les balises <a>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
<li id="mg2" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">lien 2</a>
			<div id="sMenu1">
				<ul class="smenuGauche">
					<li id="mg3" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-0</a></li>
					<li id="mg4" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-1</a></li>
					<li id="mg5" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-2</a></li>
					<li id="mg6" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-3</a></li>
					<li id="mg7" onclick="initMenuGauche();"><a href="#" onclick="this.className='selected'">sous lien 2-4</a></li>
				</ul>
			</div>
 </li>

et supprime le terme javascript après tes événements onclick il est inutile.

[pop_up]

Effectivement c'est une solution. J'ai fait ce que tu m'as dit mais en laissant l'evenement onclick sur les li car c'est vraiment le <li> que je veux decorer car il est bien plus large que la balise <a>.

En tout cas c'est le moyen pour resoudre ce probleme.

merci

[Auteur]

c'est vraiment le <li> que je veux decorer car il est bien plus large que la balise <a>.

Dans ce cas tu peux utiliser cette méthode :

La balise <li> contient ta balise <div> tu comprends bien que si tu mets un fond sur ta balise <li>, le <div> aura le même fond sauf si le div n'a pas de fond transparent (style par défaut)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<li id="mg2" onclick="initMenuGauche();this.className='selected'"><a href="#">lien 2</a>
			<div id="sMenu1" style="background-color: #FFFFFF">
				<ul class="smenuGauche">
					<li id="mg3" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-0</a></li>
					<li id="mg4" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-1</a></li>
					<li id="mg5" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-2</a></li>
					<li id="mg6" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-3</a></li>
					<li id="mg7" onclick="initMenuGauche();this.className='selected'"><a href="#">sous lien 2-4</a></li>
				</ul>
			</div>
 </li>

dans cet exemple, le div a un fond blanc (tu peux mettre une autre couleur ou une image). Clique sur le lien parent, il aura l'aspect selected mais pas les <li> enfants car le <div> conteneur aura un fond blanc.