indiquer la rubrique courante dans un menu horizontal déroulant

Version imprimable

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:

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>

Bonjour,
tu peux essayer
Code:

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+

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:

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:

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:

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>

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

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:

<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+

05/09/2008, 10h46
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 !!
05/09/2008, 10h53
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+
05/09/2008, 11h06
marion5515

Ah mon plus grand désespoir rien ne fonctionne ! Par contre j'aurais une petite question : en fait ce menu horizontal constitue à lui seul un fichier php que j'inclus dans chaque page représentant chaque rubrique principal. Lorsque je mets simplement dans le feuille de style de la page de la rubrique une propriété css pour un élément dont le nom est dans le fichier php du menu horizontal cela ne fait rien. Se pourrait-il qu'il ne trouve pas l'élément ayant cet identifiant parce qu'il est dans un fichier php inclus ?!
05/09/2008, 11h18
E.Bzz

:koi:
On peut voir tes autres syntaxes CSS (l'include PHP ne devrait pas poser de problème) ?

A+

En fait je voudrais tout simplement mettre dans la feuille de style de la rubrique about Separex par exemple une propriété css pour le span dont l'id est "menu_1" ce qui correspond bien à la rubrique about Separex dans le menu horizontal du fichier php inclus.

D'où ce simple code présent dans la feuille de style de la page AboutSeparex:
Code:

1 2 3 4 5 #menu_1 a{ color : #000033; background-color : #FFF; }
Voici le code de début de ma page avec le fameux include :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body onload="RefreshIMG(); rubriqueactive();"> <div id="page"> <?php require "fonctionsAffichage.php"; ?> <div id="sous-menu"> <IMG id="image" name="image" src="./images/aboutSeparex/batiment.jpg" width=210 height=200> <div id="rubsousmenu"> <ul > <li id="separexFewWords"><a href="./aboutSeparex.php?rubrique=separexFewWords">Separex in few words</a></li> <li id="history"><a href="./aboutSeparex.php?rubrique=history&id=ID2008">History</a></li> <li id="management"><a href="./aboutSeparex.php?rubrique=management">Management team</a></li> </ul> </div> <div id="basdepage"></div> </div>
je vous ai épargné les fonction javascript écrite avant

Pourquoi ce "a" dans le sélecteur CSS ?

Code:

1
2
3
4
5
6
#menu_1  {
	color : #000033;
	background-color : #FFF;
        width : 100%;
}

Code:

1
2
3
<div id="rubsousmenu">
  <ul >
    <li id="separexFewWords"><span id="menu_1"><a href="./aboutSeparex.php?rubrique=separexFewWords">Separex in few words</a></span></li>

A+

oh miracle j'ai réussi à faire ce que je voulais. Il semble en fait que j'appelais tout simplement la feuille de style avant la déclaration de l'élément . Donc j'ai simplement ajouter après l'include du fichier php la propriété css que je veux appliquer en particulier :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<body onload="RefreshIMG(); ongletactif(); rubriqueactive();">
	<div id="page">
	<?php 
                require "fonctionsAffichage.php";
        ?>
		<style type="text/css">
			#menu_4  a{
				color : #FFF;
				background : url(./images/menuactif.jpg) ; 
			}
		</style>
		<div id="sous-menu">
			<img id="image" src="./images/process/process1.jpg" width="210" height="250">
			<div id="rubsousmenu">
				<ul>
			        <li id="natural"><a href="./processDevelopment.php?rubrique=natural">Natural Products & Biomaterials</a></li>
			        <li id="inorganic"><a href="./processDevelopment.php?rubrique=inorganic">Inorganic Materials & Polymers</a></li>
					<li id="sterilisation"><a href="./processDevelopment.php?rubrique=sterilisation&sousrubrique=sterilisation">Sterilisation & Inactivation</a></li>
				</ul>
			</div>
		</div>

merci beaucoup pour votre aide !!

Bonne journée !

05/09/2008, 11h58
E.Bzz

Heu de rien, mais ce n'est pas bon, ça :koi:

Ton include est fait par le serveur => le nav reçoit la page de la même manière que si l'include était directement dans la page.
Le CSS doit être déclaré dans le header !

Il y a toujours un problème :aie:

Au fait : tu n'as pas enlevé le "a" du CSS : tu devrais pour cibler le span ...

A+