indiquer la rubrique courante dans un menu horizontal déroulant

**marion5515** · 05/09/2008, 09h06

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** · 05/09/2008, 09h16

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** · 05/09/2008, 10h03

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** · 05/09/2008, 10h23

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** · 05/09/2008, 10h46

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** · 05/09/2008, 10h53

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+

**marion5515** · 05/09/2008, 11h06

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 ?!

**E.Bzz** · 05/09/2008, 11h18

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

A+

**marion5515** · 05/09/2008, 11h23

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 :

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

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 :

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

**E.Bzz** · 05/09/2008, 11h32

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

Code :

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

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

Code :

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

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+

**marion5515** · 05/09/2008, 11h52

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 :

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

**E.Bzz** · 05/09/2008, 11h58

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

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

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

A+

indiquer la rubrique courante dans un menu horizontal déroulant

JavaScript

Discussions similaires

Partager

Partager