Intégration web

Menu HTML et CSS, sliding doors et item current en PHP

Ce mini tutoriel propose une technique simple pour afficher un effet de survol sur un bouton en permutant une image en background associée à un lien et faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Le tout avec une pincée de HTML, une bonne dose de CSS et un soupçon de PHP.

Le code HTML

Le menu est constitué d’une liste non-ordonnée ul où chaque lien a contenu dans l’élément li est transformé en bloc display: block afin de recevoir une image de fond qui contient les deux états du bouton. Cette image possède une largeur de 100px pour une hauteur de 50px. Les vingt-cinq premiers pixels de hauteur sont réservés à l’état « inactif », tandis que les vingt-cinq pixels restants feront le bonheur de la pseudo-classe :hover.

Si vous ne connaissez pas cette technique, n’ayez pas PêUR ! Vous trouverez des exemples d’images en portes coulissantes sur cet excellent blog consacré au HTML et aux CSS 😉

Qu’y a-t-il au menu ?

Il s’agit d’une simple liste qui contient les liens auxquels j’ai associé un id (ici en gras) nécessaire pour l’application des styles CSS abordés plus bas.

<div id="menu">
  <ul>
    <li><a id="accueil" href="index.php">Accueil</a></li>
    <li><a id="page1" href="page1.php">page1</a></li>
    <li><a id="page2" href="page2.php">page2</a></li>
  </ul>
</div>

La feuille de style CSS pour le menu

En ce qui concerne la feuille de style pour le menu, la seule chose à retenir, c’est le décalage de -25px pour l’état :hover qui affiche la partie de l’image réservée pour le survol. C’est ce même décalage qui permettra par la suite de signaler la rubrique en cours lorsque le bouton en question sera cliqué.

/* Style général du menu */
#menu {
     margin: 0;
     padding: 0;
}
#menu ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
 }
#menu ul li {
     float: left;
 }

 /* Style global des liens */
a#index,
a#page1,
a#page2 {
     display: block;
     width: 100px;
     height: 25px;
}

/* Style particulier pour le background des liens
avec pour chacun : l'état inactif et actif */
a#index {
     background: url(images/bt_index.png) 0 0 no-repeat;
}
a#index:hover {
     background: url(images/bt_index.png) 0 -25px no-repeat;
}
a#page1 {
     background: url(images/bt_page1.png) 0 0 no-repeat;
}
a#page1:hover {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
a#page2 {
     background: url(images/bt_page2.png) 0 0 no-repeat;
}
a#page2:hover {
     background: url(images/bt_page2 .png) 0 -25px no-repeat;
}

La petite fonction php qui va bien

<?php
function currentPage($strPage) {
  if (strstr($_SERVER['PHP_SELF'], $strPage)) {
     echo 'class="current_' . $strPage. '" ';
  } else {
     echo '';
  }
}
?>

Cette fonction recherche la première occurence de la chaîne de caractère $strPage dans l’URL courante grâce à strstr().

Ensuite la fonction echo() affiche une classe CSS composée de la concaténation du terme current_ et de la chaîne $strPage. Si le terme $strPage n’existe pas dans l’URL, la fonction renvoit une chaine vide…

Le menu HTML avec l’appel de la fonction

<div id="menu">
     <ul>
         <li><a <?php currentPage('index') ?>id="accueil" href="index.php" >Accueil</a></li>
         <li><a <?php currentPage('page1') ?>id="page1" href="page1.php" >page1</a></li>
         <li><a <?php currentPage('page2') ?>id="page2" href="page2.php" >page2</a></li>
     </ul>
</div>

Le menu HTML après un clic sur le deuxième lien

<div id="menu">
     <ul>
         <li><a id="accueil" href="index.php">Accueil</a></li>
         <li><a class="current_page1" id="page1" href="page1.php" >page1</a></li>
         <li><a id="page2" href="page2.php">page2</a></li>
     </ul>
</div>

La touche finale avec les liens current

/* Styles particuliers issus de la fonction PHP pour les liens en cours */
#menu a.current_index {
     background: url(images/bt_accueil.png) 0 -25px no-repeat;
}
#menu a.current_page1 {
     background: url(images/bt_page1.png) 0 -25px no-repeat;
}
#menu a.current_page2 {
     background: url(images/bt_page2.png) 0 -25px no-repeat;
}

Conclusion

Pas de quoi faire le kakou, c’est certain 😉 mais cette petite fonction PHP remplit bien son office. J’avoue que cette petite merveille de strstr() y est pour beaucoup. Après quelques recherches sur PHP, je me rends compte que ce langage possède un nombre extraordinaire de fonctions pour traiter les chaines de caractères qu’on dirait du perl !

Si de votre côté vous avez des petites fonctions PHP ou Javascript liées aux CSS qui prennent la poussière au fond d’un dossier, n’hésitez pas à leur donner une seconde vie en en faisant profiter les autres 🙂

Stay tuned and mind the gap!

Note du 10/11/2007 : Afin d’éviter d’éventuels soucis de cascade CSS dues à la priorité des ID sur les classes, j’ai modifié les styles comme suit : #menu ul li a#index {…} est remplacé par a#index {…} (ce qui est largement suffisant) et je laisse #menu a.current_index {…} de manière à ce que le poids de la classe .current_index {…} soit plus important que a#index {…}.

Voici un exemple très moche mais fonctionnel pour illustrer ce tutoriel. Téléchargez le fichier zip de l’exemple.

Publié le par Bruno Bichet