Une connaissance du langage PHP est requise, même si je vais essayer de faire simple. Le tutoriel de M@teo21 vous sera peut-être utile...
Dans les précédentes parties du tutoriel, j'ai supposé, sans le dire, qu'on travaillait avec un site statique, c'est=à=dire que sur chaque page, on recopie le code du menu.
Je mets ça sur le tapis parce qu'il y a un hic. En effet, suivant la page où l'on se trouve, l'onglet actif n'est pas le même. Vous vous souvenez, le
class="active" qu'on mettait sur l'onglet actif ?
Si on travaille seulement en xHTML (pas de PHP), ce n'est pas vraiment un problème, parce que sur toute les pages, le code du menu est écrit en dur, et donc, il suffit de changer de place ce
class="active". En PHP, ce n'est pas si simple.
PHP est très pratique pour ne pas avoir à recopier sur chaque page le menu. En effet, c'est beaucoup plus simple de mettre le code dans un fichier à part et d'inclure ce fichier sur chaque page (pour plus de détails concernant l'inclusion de fichiers, je vous renvoie au
tutoriel de M@teo21).
Mais alors, pourquoi tu dis que ça n'est pas simple en PHP ?
Parce qu'il faut détecter la page courante.
Je pense que j'y suis allé un peu fort en disant que ce n'est pas facile...
Donc, comme je l'ai dit, on va travailler en PHP maintenant, et on va utiliser un fichier à part, appelons-le
menu.php. C'est dans ce fichier qu'on va construire le code xHTML du menu, quelle que-soit la page où l'on se trouve.
Dans les autres fichiers, on va effacer le code du menu, qui, je le rappelle, ressemble à ceci :
Code : HTML | <div id="menu">
<ul id="onglets">
<li class="active"><a href="index.php">Accueil</a></li>
<li><a href="forum.php">Forums</a></li>
<li><a href="livre_or.php">Livre d'or</a></li>
<li><a href="equipe.php">L'équipe</a></li>
<li><a href="inscription.php">Inscription</a></li>
<li><a href="connexion.php">Connexion</a></li>
</ul>
</div>
|
Il faut donc le supprimer. A la place, on va appeler une fonction qui se trouve dans le fichier
menu.php qui va renvoyer le code xHTML du menu tout joli et tout beau
.
Comme cette fonction se trouve dans un autre fichier, on va inclure ce fichier sur toutes les pages. Si, sur votre site, il y a déjà des inclusions, vous savez comment faire, sinon, en haut de vos fichiers, mettez :
Code : PHP | <?php
require_once("./menu.php");
$menu = affiche_menu();
?>
|
Comme vous pouvez le deviner, la fonction que l'on va écrire s'appelle
affiche_menu. Je stocke le résultat (le code xHTML) dans une variable. Auparavant, j'ai inclus le fichier qui contient cette fonction.
Ensuite, à l'endroit où il y avait le code du menu, il faut mettre :
Code : PHP
Cela provoque l'affichage du code renvoyé par notre fonction.
Il faut faire ces deux opérations sur tous les fichiers !
Passons maintenant à notre fonction miracle
.
Mais d'abord, je vais éclaircir un point : la méthode que je propose est la plus simple que je connaisse, et il y a surement encore un meilleur moyen d'arriver au même résultat. Ici, je ne vais pas passer par une variable GET ou POST, ni même me servir de JavaScript. Ma méthode repose sur le nom du fichier à afficher.
Donc, notre fonction se trouve dans le fichier
menu.php et se nomme
affiche_menu.
Le début du code est donc :
Code : PHP | <?php
function affiche_menu()
{
}
?>
|
Ensuite, on va stocker dans deux tableaux les liens des différents onglets et dans le deuxième, le texte affiché sur ces onglets.
Ici, je vais le faire en dur dans le code, mais on peut très bien remplir ces deux tableaux dynamiquement à partir d'une base de données par exemple.
Il est important que l'ordre soit respecté !
En effet, le lien de l'onglet du premier tableau doit correspondre au texte affiché sur ce même onglet dans le deuxième tableau.
Il faut également une variable qui contiendra le code xHTML, on l'appellera
$menu.
Ensuite, le secret de la méthode du nom de fichier est la récupération du nom du fichier qui est affiché (dans la barre d'adresse). Pour récupérer ce nom, il existe une variable définie par
$_SERVER['PHP_SELF'] qui renvoie le chemin d'accès absolu, par exemple, pour mes tests en local, il me donne :
/menu/index.php. Pour extraire le nom du fichier, il y a une fonction qui le fait très bien, et qui donne même d'autres informations sous forme d'un tableau associatif. Cette fonction est :
pathinfo($chemin);. En faisant un
print_r(pathinfo($_SERVER['PHP_SELF'])); on peut voir les informations disponibles, et celle qui nous intéresse est
basename, qui donne le nom du fichier avec l'extension.
Le début du code est donc :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.php", "forum.php", "livre_or.php", "equipe.php", "inscription.php", "connexion.php" );
$tab_menu_texte = array( "Accueil", "Forums", "Livre d'or", "L'équipe", "Inscription", "Connexion" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"onglets\">\n";
$menu .= "</ul>\n </div>";
// on renvoie le code xHTML
return $menu;
}
?>
|
Il ne reste plus qu'à parcourir les tableaux, en comparant à chaque fois si le nom du fichier du tableau $tab_menu_lien correspond au nom du fichier de la page courante. Si c'est le cas, on applique la
class="active".
Voici le code final de la fonction :
Code : PHP 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 | <?php
function affiche_menu()
{
// tableaux contenant les liens d'accès et le texte à afficher
$tab_menu_lien = array( "index.php", "forum.php", "livre_or.php", "equipe.php", "inscription.php", "connexion.php" );
$tab_menu_texte = array( "Accueil", "Forums", "Livre d'or", "L'équipe", "Inscription", "Connexion" );
// informations sur la page
$info = pathinfo($_SERVER['PHP_SELF']);
$menu = "\n<div id=\"menu\">\n <ul id=\"onglets\">\n";
// boucle qui parcours les deux tableaux
foreach($tab_menu_lien as $cle=>$lien)
{
$menu .= " <li";
// si le nom du fichier correspond à celui pointé par l'indice, alors on l'active
if( $info['basename'] == $lien )
$menu .= " class=\"active\"";
$menu .= "><a href=\"" . $lien . "\">" . $tab_menu_texte[$cle] . "</a></li>\n";
}
$menu .= "</ul>\n</div>";
// on renvoie le code xHTML
return $menu;
}
?>
|
Sur les autres pages, il doit y avoir quelque chose comme ça :
Code : PHP 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <?php
require_once("./menu.php");
$menu = affiche_menu();
?>
<html>
<head>
<link href="design.css" type="text/css" rel="stylesheet" />
</head>
<body>
<?php
echo $menu;
?>
</body>
</html>
|
Si, par endroits, l'indentation est un peu bizarre, c'est pour une meilleure lisibilité du code source final, visible à partir du navigateur.
Voilà, la gestion de l'onglet actif est maintenant gérée sur toutes les pages, par un code unique. Si vous deviez rajouter des onglets, il faudra juste rajouter dans les deux tableaux les liens et les textes associés, et bien sûr, rajouter dans les nouvelles pages l'inclusion et l'affichage du résultat de la fonction
.
Menus en onglets
mais celui sur le XHTML/CSS de M@teo21 doit l'être 
.
!
, mais rassurez-vous, la suite sera du même niveau 
!
. Or, mes onglets se trouvent entre des balises <li>, donc il faut mettre #onglets li. Je crée mes onglets en mettant : border:1px solid #9EA0A1 (cadre de 1 pixel en ligne pleine de couleur #9EA0A1 
Anonyme
Trouvez une formation
Suggestions
Flux RSS News
Twitter
Facebook
Google+