Discussion :

[marion5515]

Bonjour à tous et à toutes !!

J'ai un petit souci qui commence à me prendre beaucoup de temps et qui me retarde dans la mise en ligne d'un site internet. J'expose la situation :
j'ai un menu horizontale avec différentes rubriques qui au passage de la souris sur chaque rubrique déroule en vertical les sous-rubriques. Je souhaiterais que lorsque l'utilisateur clique sur une des rubriques principale du menu horizontal le fond change de couleur. Dans l'idée de faire remarquer dans quelle rubrique il navigue actuellement. Seulement j'avais écris une petite fonction javascript qui tout simplement chercher dans le document un élément dont l'id était tel nom et que pour cet élément eh bien je changais le background color. Mais cela cloche puisque cet élément un élément de liste <li> mais qui possède une sous liste. Si bien que lorsque je change le fond de cet élément je change par conséquent le fond des sous listes, ce que je ne veux pas. Auriez vous une idée pour m'aider, en espérant avoir été assez claire.

Voici le code concerné (le menu horizontal avec sous-liste):

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
 
 
<li><a href="./aboutSeparex.php?rubrique=separexFewWords">About<br/> Separex</a>
 
      <ul>
 
		<li><a href="./aboutSeparex.php?rubrique=separexFewWords">Separex in few words</a></li>
 
		<li><a href="./aboutSeparex.php?rubrique=history&id=ID2008">History</a></li>
 
		<li><a href="./aboutSeparex.php?rubrique=management">Management Team</a></li>
 
	</ul>	
 
</li>

[E.Bzz]

Bonjour,
tu peux essayer

Code :

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

1
2
3
<li><span id="menu_1" style="width:100%;"><a href="./aboutSeparex.php?rubrique=separexFewWords">About<br/> Separex</a></span> 
      <ul> 
		<li><a href="......

Tu n'as ainsi qu'à changer le background du span : ça n'affectera pas les sous-menus ...

A+

[marion5515]

Il semble effectivement que cela soit la solution mais je galère un petit peu pour l'appliquer !! En fait j'ai donner un span différent pour chaque rubrique principale du menu et j'ai écris la fonction javascript suivante :

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
25
26
 
 
function menuactif(){
			var urlpage = document.location.href;
			if(urlpage.indexOf('aboutSeparex',0)!=-1){
					document.getElementById("menu_1").className = 'menuAct' ;
			}
			if(urlpage.indexOf('pharma',0)!=-1){
					document.getElementById("menu_2").className = 'menuAct';
			}
			if(urlpage.indexOf('processDevelopment',0)!=-1){
					document.getElementById("menu_4").className = 'menuAct';
			}
			if(urlpage.indexOf('highPressureSystems',0)!=-1){
				document.getElementsById("menu_3").className = 'menuAct' ;
			}
			if(urlpage.indexOf('news',0)!=-1){
					document.getElementById("menu_5").className = 'menuAct';
			}
			if(urlpage.indexOf('contact',0)!=-1){
				document.getElementsById("menu_7").className = 'menuAct' ;
			}
			if(urlpage.indexOf('download',0)!=-1){
				document.getElementsById("menu_6").className = 'menuAct' ;
			}
		}

Tout simplement selon le nom de la rubrique qui apparait dans l'url, je sais laquelle je dois faire ressortir. Cependant cela ne fonctionne pas !

Voici le code css qui permet de changer l 'apparence de la rubrique courante :

Code :

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

1
2
3
4
5
6
 
 
.contenu-menu li.menuAct a{
	color : #000033;
	background-color : #FFF;
}

rappel d'une partie du code du menu :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
 
 
<div class="contenu-menu">
				<ul id="menu">
		        	<li><span id="menu_1"><a href="./aboutSeparex.php?rubrique=separexFewWords">About<br/> Separex</a></span>
						<ul>
							<li><a href="./aboutSeparex.php?rubrique=separexFewWords">Separex in few words</a></li>
							<li><a href="./aboutSeparex.php?rubrique=history&id=ID2008">History</a></li>
			                <li><a href="./aboutSeparex.php?rubrique=management">Management Team</a></li>
			            </ul>	
		            </li>
		        	<li><span id="menu_2"><a href="./pharma.php?rubrique=overview">Pharmaceutical<br/> Technology</a></span>
		            	<ul>
							<li><a href="./pharma.php?rubrique=overview">Overview</a></li>
		                    <li><a href="./pharma.php?rubrique=challenges&sousrubrique=over">Challenges</a>
								<ul>
									<li><a href="./pharma.php?rubrique=challenges&sousrubrique=over">Overview</a></li>
				                   	<li><a href="./pharma.php?rubrique=challenges&sousrubrique=api">API & Biopharmaceuticals Processing</a></li>
									<li><a href="./pharma.php?rubrique=challenges&sousrubrique=drug">Drug Delivery Systems</a></li>
				                </ul>
							</li>
							<li><a href="./pharma.php?rubrique=technology&sousrubrique=scf">Technology</a>
								<ul>
									<li><a href="./pharma.php?rubrique=technology&sousrubrique=scf">SCF Technology Platform</a></li>
				                   	<li><a href="./pharma.php?rubrique=technology&sousrubrique=api">API manufacturing</a></li>
									<li><a href="./pharma.php?rubrique=technology&sousrubrique=drug">Drug Delivery Systems</a></li>
				                </ul>
							</li>
							<li><a href="./pharma.php?rubrique=facilities&sousrubrique=rd">Facilities</a>
								<ul>
									<li><a href="./pharma.php?rubrique=facilities&sousrubrique=rd"> R&D </a></li>
				                   	<li><a href="./pharma.php?rubrique=facilities&sousrubrique=cgmp">cGMP Clean Room</a></li>
				                </ul>
							</li>
							<li><a href="./pharma.php?rubrique=partnering">Partnering</a></li>
		                </ul>
		        	</li>

[E.Bzz]

Une suggestion (qui permet de ne pas dépendre des url, entre autre)

Code :

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

1
2
3
4
5
6
7
8
function menuactif(id_span) {
var la_liste = document.getElementById('menu').getElementsByTagName('span');
for (i=0; i<la_liste.length; i++)
if (la_liste[i].id == id_span)
la_liste[i].className = 'menuAct';
else 
la_liste[i].className = 'menuNormal';
}

avec

Code :

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

<li><span id="menu_1"><a href="./aboutSeparex.php?rubrique=separexFewWords" onclick="menuactif(this.parentNode.id);">About<br/> Separex</a></span>

Cette version permets également de ne pas avoir à modifier la fonction en cas de modification des rubriques

A+

[marion5515]

Il semblerait que mon problème vienne tout simplement de mon code css car votre fonction fonctionne parfaitement, j'ai mis des alert pour vérifier, mais cela n'applique pas le changement de couleur dans le menu horizontal. Je sais que maintenant je ne suis plus dans la bonne partie du forum mais avant d'ouvrir une nouvelle discussion ailleurs, je voudrais être sûr que le problème vient du css. Un commentaire sur mon code css serait donc le bienvenue !!

[E.Bzz]

Cette syntaxe CSS n'est pas reconnue par IE (6 en tous cas).
Utilise plutôt une classe dédiée aux span (dans mon exemple : 'menuNormal') ...
EDIT : de plus tu ne cibles pas le span, mais le <A> ...

A+