Le Blog de Thee

Beaucoup de sites web ont un menu de navigation qui applique un style particulier au lien vers la page où se trouve le visiteur en ce moment. Exemple : si vous êtes sur la page d’accueil, le lien du menu « Accueil » sera affiché en gras. Voici donc un petit script PHP qui permet d’appliquer un style spécifique au lien du menu en cours de visite. Vous pouvez voir un exemple concret de ce genre de menu.

Le menu en HTML

Voici notre menu :

1
2
3
4
5
6

<ul>
 <li><a href="index.php" title="Accueil">Accueil</a></li>
 <li><a href="index.php?page=livreor" title="Livre d'or">Livre d'or</a></li>
 <li><a href="index.php?page=articles" title="Article">Articles</a></li>
 <li><a href="index.php?page=creations" title="Créations">Créations</a></li>
</ul>

Pour chaque lien, on attribue une variable get qui détermine la page à afficher. Si le visiteur clique sur « Articles », le fichier articles.php est inclut dans index.php. Bref, un menu simple.

Notre but sera d’appliquer un class de valeur courant au lien correspondant à la page en cours de visite.

Par exemple, le visiteur est sur « Livre d’or » :

1
2
3
4
5
6

<ul>
 <li><a href="index.php" title="Accueil">Accueil</a></li>
 <li><a href="index.php?page=livreor" title="Livre d'or" class="courant">Livre d'or</a></li>
 <li><a href="index.php?page=articles" title="Article">Articles</a></li>
 <li><a href="index.php?page=creations" title="Créations">Créations</a></li>
</ul>

Autre exemple, le visiteur est sur « Articles » :

1
2
3
4
5
6

<ul>
 <li><a href="index.php" title="Accueil">Accueil</a></li>
 <li><a href="index.php?page=livreor" title="Livre d'or">Livre d'or</a></li>
 <li><a href="index.php?page=articles" title="Article" class="courant">Articles</a></li>
 <li><a href="index.php?page=creations" title="Créations">Créations</a></li>
</ul>

Le style du lien

Imaginons que nous désirions mettre le lien courant en gras. Nous entrons ceci dans le style CSS du menu :

1

.courant { font-weight: bold; }

Le script PHP

Passons au PHP. J’utilise les variables dynamiques. Ce qui suit devra se situer dans le même fichier que votre menu (sauf évidemment si vous utilisez un moteur de template, une structure MVC, etc…)

1. Récupérons le nom de la page en cours grâce à la variable get dans l’URL.
   
   Si vous utilisez une structure d’URLs de type index.php?page=nom_de_la_page : ce tuto correspond à cette structure, pas de problème pour la suite.
   
   Si vous réécrivez vos URLs (type /nom_de_la_page.html) : débrouillez vous pour récupérer le nom de la page en cours de visite avec la variable d’environnement $_SERVER['REQUEST_URI'].
   Pour poursuivre avec notre exemple, nous allons récupérer le nom de la page comme ceci :

   1 2	if(!empty($_GET['page'])) ${$_GET['page']} = 'courant';

   Si la variable ‘page’ n’est pas vide, alors, affecter la valeur ‘courant’ à la variable de nom la valeur de la variable ‘page’.

   Nous créons donc une variable dont le nom seulement varie (pas la valeur) !

   Exemple : si le visiteur clique sur Articles, le script crée une variable $article possédant la valeur ‘courant’.

2. Maintenant, il s’agit d’utiliser cette variable (ou plutôt ces variables) dans le menu de navigation. Ajoutons un attribut class à tous les liens du menu de cette manière :

   1 2 3 4 5 6

   <ul> <li><a href="index.php" title="Accueil" class="<?php echo $accueil; ?>">Accueil</a></li> <li><a href="index.php?page=livreor" title="Livre d'or" class="<?php echo $livreor; ?>">Livre d'or</a></li> <li><a href="index.php?page=articles" title="Article" class="<?php echo $articles; ?>">Articles</a></li> <li><a href="index.php?page=creations" title="Créations" class="<?php echo $creations; ?>">Créations</a></li> </ul>

   Quand l’URL sera index.php?page=accueil, la variable $accueil aura comme valeur la chaîne de caractère ‘courant’. Donc le lien sera en gras.

Pour terminer

Le code complet. Simple, mais efficace. A ajouter dans votre fichier menu.php par exemple.

1
2
3
4
5
6
7
8
9
10
11
12
13

<?php
if(!empty($_GET['page']))
 ${$_GET['page']} = 'courant';
else
 $accueil = 'courant';
?>
 
<ul>
 <li><a href="index.php" title="Accueil" class="<?php echo $accueil; ?>">Accueil</a></li>
 <li><a href="index.php?page=livreor" title="Livre d'or" class="<?php echo $livreor; ?>">Livre d'or</a></li>
 <li><a href="index.php?page=articles" title="Article" class="<?php echo $articles; ?>">Articles</a></li>
 <li><a href="index.php?page=creations" title="Créations" class="<?php echo $creations; ?>">Créations</a></li>
</ul>

Tags : Développement, Web