[Résolu] Onglet du menu coloré quand on est sur la page

Bonjour, je cherche a ce que l'onglet de mon menu sur lequel je me trouve change de couleur quand il est actif. Voici mon menu :
<nav>
<a href="index.php"><li>news</li></a>
<a href="index.php?page=bio"><li>bio</li></a>
<a href="index.php?page=music"><li>music</li></a>
<a href="index.php?page=agenda"><li>agenda</li></a>
<a href="index.php?page=booking"><li>booking</li></a>
<a href="index.php?page=contact"><li>contact</li></a>
</nav>

J'utilise php, et je ne trouve vraiment pas comment faire, donc si quelqu'un pouvait m'éclairer de ses lumières. Merci

salut,
déjà ton code contient des erreurs, un élément <li> ne peut être enfant que d'un <ul>. Les <a> quant à eux, dans la structure "normale" d'un menu sont enfants des <li> comme ceci.

<nav>
	<ul>
		<li><a href="index.php">news</a></li>
	</ul>
</nav>

Pour ton cas tu peux déjà construire ton menu directement en PHP, récupérer la variable "page" et affecter une classe à tes <li> selon que l'on soit sur la page en cours ou pas pour pouvoir ensuite lui donner un style via CSS.

<?php
	$page = isset($_GET["page"]) ? $_GET["page"] : "";
	$menu[] = "news";
	$menu[] = "bio";
	$menu[] = "music";
	$menu[] = "agenda";
	$menu[] = "booking";
	$menu[] = "contact";
?>
<nav>
	<ul>
	<?php
		for($i=0; $i<6; $i++){
		echo "<li ".($page==$menu[$i] || $page=="" && $i==0 ? "class=here" : "")."><a href=\"index.php".($i==0 ? "": "?page=".$menu[$i])."\">".$menu[$i]."</a></li>";
		}
	?>
	</ul>
</nav>

.here {background:#09f;}
.here a {color:#fff;}
li {display:inline-block;vertical-align:top;padding:5px 10px;text-transform:capitalize;}
a {text-decoration:none;color:#000;}

Ça doit paraître assez brouillon mais j'ai du mal à réfléchir en ce moment.

Merci beaucoup de ta réponse je vais essayer de comprendre tout cela

Pas facile! Mais merci !
Modifié par louloukipet (26 Aug 2013 - 19:16)

J'ai trouvé, mais pas comment l'onglet reste de la meme couleur quand je suis sur la page

Oui, encore un code (pas très clair c'est vrai) que j'ai parachuté.
En fait il peut être légèrement améliorer pour ne pas te soucier du nombre d'éléments à parcourir dans le tableau.

<?php
	$page = isset($_GET["page"]) ? $_GET["page"] : "";
	$menu[] = "news";
	$menu[] = "bio";
	$menu[] = "music";
	$menu[] = "agenda";
	$menu[] = "booking";
	$menu[] = "contact";
?>
<nav>
	<ul>
		<?php
			foreach($menu as $k=>$val){
				echo "<li ".($page==$menu[$k] || $page=="" && $k==0 ? "class=here" : "")."><a href=\"index.php".($k==0 ? "": "?page=".$menu[$k])."\">".$menu[$k]."</a></li>";
			}
		?>
	</ul>
</nav>

Pour un code plus bavard, ça donnerait ça

<?php
	$page = isset($_GET["page"]) ? $_GET["page"] : "";				// (1)
	$menu[] = "news";												// (2)
	$menu[] = "bio";
	$menu[] = "music";
	$menu[] = "agenda";
	$menu[] = "booking";
	$menu[] = "contact";
?>
<nav>
	<ul>
	<?php
		foreach($menu as $k=>$val){									// (3)
			$TonCode = "<li ";										// (4)
			
			if ($page == $menu[$k] || $page == "" && $k ==0 ) {		// (5)
				$TonCode .= "class=here";
			}
			
			$TonCode .= "><a href=\"index.php";						// (6)
			
			if ($k != 0) {											// (7)
				$TonCode .= "?page=".$menu[$k];
			}
			
			$TonCode .= "\">".$menu[$k]."</a></li>";				// (8)
			
			echo $TonCode;
		}
	?>
	</ul>
</nav>

1 - On récupère la valeur de "page" dans l'url (ex:index.php?page=bio ==> $page = bio) et si on est sur "News", c'est qu'elle est vide alors la valeur de $page sera vide aussi.
2 - On met les liens de ton menu dans un tableau pour le récupérer ensuite.
3 - On parcourt le tableau où se trouvent les éléments de ton menu pour créer la structure HTML adéquate.
4 - On commence à écrire le code HTML à intégrer.
5 - Si la valeur de $page est la même que celle de l'élément en cours du tableau que l'on parcourt, ou que la valeur de $page est vide et que l'élément en cours est le premier (soit "news"), donc l'élément en cours est la page sur laquelle on se trouve. On lui ajoute alors une classe "here" pour pouvoir lui appliquer un style en CSS par la suite.
6 - On continue à écrire le code HTML à intégrer.
7 - Si l'élément en cours du tableau que l'on parcourt a un indexe différent de 0 (i.e ce n'est pas "news") alors on ajoute à l'attribut "href" "?page="+le lien adéquat.
8 - On finit d'écrire le code HTML à intégrer.

Bon ça doit être encore brouillons mais un peu moins qu'au début

Merci de vos réponses je vais y travailler. Je n'ai qu'une page pour mon menu mais merci JuseN

Le code que tu m'a donné marche parfaitement, dans le css je change mon here comme je veux sauf sa couleur
Je ne comprend pas vraiment pourquoi en faite
Merci beaucoup en tout cas et si vous comprenez...

C'est bon merci bcp !!