8791 sujets

Développement web côté serveur, CMS

[résolu] Lien actif en php

Bonjour,
Je dois mettre un menu sur mon site, avec une couleur au survol des liens (une couleur différente pour chaque lien), et faire en sorte que les liens restent de cette couleur lorsque l'on a cliqué dessus et que la page est active (pour se situer dans le site plus facilement). J'ai trouvé ce tuto en PHP qui identifie la page en cours avec un id: http://www.alistapart.com/articles/keepingcurrent/ , j'essaie de l'arranger avec mon propre code de menu mais ça ne fonctionne pas...

J'ai donc une page qui s'appelle navigation.php:

<dl id="navigation">
					<dt<?php if ($thisPage=="Actualités") 
      					echo " id=\"currentpage\""; ?> class="c1"  onclick="javascript:montre();"><a href="actualites.php">Actualités<span></span></a></dt>
					<dt class="c2" <?php if ($thisPage=="Programmation") 
      					echo " id=\"currentpage\""; ?> onclick="javascript:montre('smenu2');"><a href="#">Programmation<span></span><a/></dt>
						<dd id="smenu2">
							<ul>
								<li class="c2" <?php if ($thisPage=="En ce moment") 
      					echo " id=\"currentpage\""; ?>><a href="encemoment.htm">En ce moment<span></span></a></li>
								<li class="c2" ><a href="prochainement.htm">Prochainement<span></span></a></li>
								<li class="c2"><a href="archives.htm">Archives<span></span></a></li>
							</ul>
						</dd>	
				</dl>


une page test.php avec l'include:

<?php $thisPage="test"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
....
	<div id="liste">
		<?php include("navigation.php"); ?>
	</div> 
	
</body>
</html>


et pour l'essai, la page appelée dans test.php avec le premier lien du menu (ici donc atualites.php)

<?php $thisPage="Actualités"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="styletest.css" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>

<body>
	<div id="global">
			<div id="liste">
				<?php include("navigation.php"); ?>
			</div> 
				<p>bla bla bla</p>
	  </div>
</body>
</html>


et enfin la feuille de style:

/*menu*/
#navigation dl, dt, dd, ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#navigation a {
	color:#000000;
	text-decoration: none;}
	
#navigation {
	padding:0;
	margin: 10px 0px 0px 14px;
	list-style-type:none;
	font-family:Helvetica;
	font-size:16px;
	font-weight:bold;
	}
	
#navigation dt {
	cursor: pointer;
	margin: 2px 0;
	height: 20px;
	line-height: 20px;
	font-weight: bold;
	}

#navigation dd {
	border: none;
	line-height: 20px;
	}
	
#navigation li {
	text-align: left;
	font-size:14px;
	}
	

/*couleur des liens du menu au survol*/
#navigation li.c1 a:hover, #navigation dt.c1 a:hover{
	color:#FE0000;
	background-repeat:no-repeat;
	}
	
#navigation #currentpage li.c1 a,  #navigation #currentpage dt.c1 a{
	color:#FE0000;
	background-repeat:no-repeat;
	}


C'est un peu fouillis, car j'essaie de faire fonctionner 3 choses dans ce menu :
- lorsqu'on survole, une image s'affiche à coté du lien (c'est pour ça que j'ai des <span> dans mon menu, ça affiche des images en CSS)
- le menu est déroulant (c'est le code javascript)
- et enfin je veux des liens actifs (ça c'est le code PHP qui ne fonctionne pas)

Peut-être que mon code n'est pas "propre" et que quelque chose interfère dans le PHP?
Modifié par lunaloca (09 Jul 2008 - 16:23)
C'est là que ça coince?
mais je vois pas comment faire étant donné que je suis obligée d'attribuer une classe à chaque bouton, puisqu'il n'y en a aucun qui devra apparaitre de la même couleur (au survol et une fois cliqué)...
Tu parles de la classe li.c1 ou des deux id consécutifs?


#navigation #currentpage li.c1 a,  #navigation #currentpage dt.c1 a{

	color:#FE0000;

	background-repeat:no-repeat;

	}
lunaloca a écrit :
#navigation #currentpage li.c1 a,  #navigation #currentpage dt.c1 a{
	color:#FE0000;
	background-repeat:no-repeat;
}

Tu cherches à atteindre un élément qui n'existe pas, il faut tout simplement mettre :
#navigation #currentpage a,  #navigation #currentpage a{
	color:#FE0000;
	background-repeat:no-repeat;
}

Ta classe "c1" ne sert à rien à priori ...
Merci Chancago, effectivement c'est une erreur de ma part...
On a quelque fois besoin d'un coup de main même quand la solution est sous nos yeux!
J'ai parlé trop vite.

En fait SI, il me faudra une classe différente (ou un id) pour chaque lien du menu.
C'est bien la raison pour laquelle je galère!

Dans mon CSS, je voulais différencier chaque lien de cette façon, mais mon code ne fonctionne pas, ça doit être un problème de syntaxe!

(je ne sais pas si je suis claire dans mon explication...)


#navigation #currentpage li.c1 a,  #navigation #currentpage dt.c1 a{

	color:#FE0000;

	background-repeat:no-repeat;

}

#navigation #currentpage li.c2 a,  #navigation #currentpage dt.c2 a{

	color:#00FF01;

	background-repeat:no-repeat;

}
J'arrive à faire fonctionner en mettant à chaque fois un id différent pour currentpage:

#currentpage1

#currentpage2



et en les appelant donc différemment dans la partie php:

<?php if ($thisPage=="Actualités")
echo " id=\"currentpage1\""; ?>
Sujet clos
Aller à