Voyons voir de quoi nous avons besoin (sans compter le cerveau les doigts et l'éditeur texte, bien entendu):

  • Un serveur web qui supporte [PHP.
  • Un navigateur web qui respecte les normes CSS2 (nottement, qui sait reconnaître un position: fixed; quand il en voit un).
  • There is no step three.

Bon, commençons par le commencement, c'est à dire le 3ème point des qualités énumérées plus hauts. Avoir une page unique pour le menu de chaque page est un gain de temps appréciable: cela permet de mettre à jour chaque page en éditant une simple page, plutôt que de devoir éditer le menu de chaque page. PHP propose une fonction qui permet de réaliser cela en tout simplicité. Supposons que vous ayez deux pages, foo.html et bar.html avec chacune le même menu. Nous allons commencer par rennomer les pages avec l'extension .php, foo.php et bar.php donc, de manière à ce que le serveur web sache que nous souhaitons utiliser l'interpréteur PHP pour calculer ces pages. L'insertion de code PHP dans une page HTML se fait à l'aide des balises <?php (pour ouvrir) et ?> (pour fermer).

IMPORTANT: Certaines personnes vous conseilleront d'utiliser <? comme balise ouvrante. Bien que cela soit une possibilité, cela n'en reste pas moins du grand n'importe quoi. En effet, l'utilisation de cette forme est sujette à configuration de l'interpréteur PHP, et risque de poser des problèmes avec des documents XML.

Assez tournicoté, entrons dans le vif du sujet, voilà le code qui permet d'inclure une page dans une autre:

<?php include('mapage.php'); ?>

Je sais, c'est assez violent. Regardons y de plus près. On y retrouve donc bien les balises <?php et ?>, ainsi que la fonction include. En PHP, chaque fonction requiert des parenthèses, même si on l'utilise sans argument. En l'occurence, nous passons un argument à la fonction include, argument que nous prenons soint de placer entre guillemets simples (ou apostrophes comme vous coulez). De plus, chaque instruction PHP doit se terminer par un point-virgule. Nous avons donc demandé à PHP d'inclure le contenu de mapage.php. Bien, revenons à nos pages foo.php et bar.php. Imaginons que foo.php soit composé comme ceci (attention, code html non valide):

<html>
<head>
	<title>ma page foo !</title>
</head>
<body>
	<ul>
		<li><a href="foo.php">foo !</a></li>
		<li><a href="bar.php">bar !</a></li>
	</ul>
	<p>ceci est la page foo !</p>
</body>
</html>

Et que la page bar.php contienne a peu près le contenu, en remplaçant foo par bar (sauf dans le menu évidemment). Bon. Le menu, c'est le <ul>. Il contient, pour l'instant, deux liens: un vers foo.php et un vers bar.php. Quand votre site prendra de l'ampleur, le menu grossira surement, et il faudra le maintenir à jour pour chaque page, ce qui s'avérera long et fastidieux. Nous allons donc placer le menu dans un fichier menu.php (soyons original, c'est ma devise), que nous incluerons dans chaque page grâce à PHP. Voici le contenu de menu.php:

<ul>
	<li><a href="foo.php">foo !</a></li>
	<li><a href="bar.php">bar !</a></li>
</ul>

et le contenu de foo.php après modification:

<html>
<head>
	<title>ma page foo !</title>
</head>
<body>
	<?php include('menu.php'); ?>
	<p>ceci est la page foo !</p>
</body>
</html>

Bien sur, bar.php doit subir la même modification.

Très bien, nous avons maintenant notre menu centralisé. Ne reste plus qu'a le rendre fixe par rapport au reste de la page. Nous utiliserons pour cela la propriétés CSS position, comme vous aurez pu le deviner plus haut.

INTERLUDE: Il est 13h04, je vais manger. N'hésitez pas à faire de même si l'envie vous en prend ! Voilà c'était bon, je suis maintenant opérationnel pour la deuxième partie de cet article.

On en était donc à l'utilisation des CSS pour rendre le menu fixe. Tout d'abord, on peut imaginer que le menu ne soit pas la seule structure à utiliser la balise <ul>, mais qu'il soit en revanche la seule a pouvoir être qualifié de menu. On va donc de ce pas lui rajouter un id pour le caractériser en tant que tel.

<ul id="menu">

Comme ceci. Cela permet de l'identifier dans la CSS via le controleur #menu.

ATTENTION: Une id doit être unique pour la totalité de la page ! Si vous avez une autre structure susceptible de s'appeler menu, preferrez mettre des noms plus long tels que menu_general, menu_utilisateur, etc.

Bien sur, nous pourrions utiliser l'attribut style pour ajouter un style uniquement à cette balise <ul>, mais votre site utilisant XHTML/CSS2 possède déjà une feuille de style, ce serait dommage de se compliquer la vie non ? Bien, nous allons donc ajouter une propriété CSS concernant l'id menu. Cette propriété s'appelle position. Elle définit le mode de positionnage d'un élément. Les valeurs possibles sont: relative, absolute, fixed (liste non exhaustive, je ne suis pas un expert CSS, loin de là). Je ne vous expliquerai pas l'utilité de chacune, mais il paraît évident que la valeur interressante dans notre cas est fixed. Elle permet littéralement de fixer l'élément à sa place, restant ainsi immobile tandis que nous faisons défiler la page. Nous rajoutons donc la ligne suivante dans notre feuille de style (style.css par exemple):

#menu { position: fixed; }

C'est presque fini ! Au cas ou vous n'auriez pas déjà de feuille de style associée à votre page (qui le croit ?), ajoutez la ligne suivante à l'intérieur des balises <head> (en supposant que la feuille de style s'appelle style.css, bien entendu):

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Et voilà ! Cette fois c'est fini. Vous disposez maintenant d'un joli menu centralisé et fixe. Bon, IE ne supporte pas le position: fixed;, c'est pourquoi je parlais en début d'article d'un navigateur conforme au standard, mais je travaille actuellement sur une solution basée sur du javascript pour dompter IE, je vous tiens au courant !