Version imprimable http://spipeur.free.fr/article.php3?id_article=9
Le site des utilisateurs de SPIP

Un menu hiérarchique ’évolué’ pour une navigation encore plus facile

Par Eric, le mardi 25 novembre 2003.

Un menu hiérarchique situé en haut de page permet d’indiquer aux visiteurs où ils se trouvent dans l’arborescence du site. Voici une alternative à ce type de menu pour encore améliorer la navigation au sein de votre site.

Commençons par un petit rappel pour ceux qui se demanderaient ce qu’est un menu hiérarchique.
Un menu hiérarchique permet d’indiquer à un visiteur sa position actuelle par rapport à l’arborescence de votre site. Pour savoir comment réaliser un menu hiérarchique, veuillez-vous reporter à cet article.

Voici un exemple de menu hiérarchique standard :

Imaginons, que ce menu est utilisé sur la page d’une rubrique et qu’un visiteur veuille consulter une autre sous-rubrique de la rubrique Articles, voici alors les opérations qu’il devra effectuer :
-  Cliquer sur le lien Articles
-  Attendre le chargement de la page
-  Localiser la rubrique qu’il souhaite consulter
-  Cliquer sur le lien correspondant
-  Attendre le chargement de la page
-  Il arrive enfin là où il voulait aller.

Tout cela fait quand même pas mal d’opérations uniquement pour changer de rubrique. Le code proposé ici, permet de remplacer la dernière rubrique affichée dans le menu hiérarchique par une liste déroulante contenant toutes les rubriques appartenant au même niveau (C’est à dire dans notre exemple, toutes les rubriques contenue sous la rubrique Articles).

Voici un exemple du menu hiérarchique ainsi obtenu :

La navigation à l’intérieur de la rubrique Articles devient alors beaucoup plus simple. Il suffit en effet de sélectionner une rubrique dans la liste pour y accéder directement

Le code permettant cet affichage est le suivant :


Vous êtes ici : <a href="#URL_SITE_SPIP" title="#NOM_SITE_SPIP">Accueil</a>
<BOUCLE_hierarchie_rubrique(RUBRIQUES){id_rubrique}>
 <BOUCLE_rubrique_parente(RUBRIQUES){id_enfant}{doublons}>
   <BOUCLE_hierarchie(HIERARCHIE){id_rubrique}{doublons}>
     [ > <a href="#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a>]
   </BOUCLE_hierarchie>
   [ > <a href="#URL_RUBRIQUE">(#TITRE|supprimer_numero)</a>]
 </BOUCLE_rubrique_parente>
 [ >
 <!-- On met toutes les rubriques de même niveau que celle-ci dans une liste déroulante -->
 <select name="MEME_NIVEAU" onchange='javascript:window.location=eval("this.options[this.selectedIndex].value")'>
  <BOUCLE_combo(RUBRIQUES){meme_parent}{par titre}>
  <!-- On utilise php pour sélectionner la bonne ligne dans la liste -->
   <?php
    // $id_rubrique est la rubrique en cours d'affichage (celle de la page)
    // $tstrubrique est l'ID de la rubrique parcourue dans la boucle
    $tstrubrique=[(#ID_RUBRIQUE)];
    $selected="";
    if ($id_rubrique==$tstrubrique)
      $selected="selected";

    echo "<option value='#URL_RUBRIQUE'".$selected.">[(#TITRE|supprimer_numero)]</option>";
   ?>  
  </BOUCLE_combo>
 </select>
</BOUCLE_hierarchie_rubrique>

-  La boucle hierarchie_rubrique nous permet de nous positionner sur la rubrique actuelle (celle de l’article affiché sur la page par exemple).
-  Ensuite, la boucle rubrique_parente, nous permet de remonter d’un cran dans la hiérarchie pour nous positionner sur la rubrique contenant la rubrique actuelle.
-  La boucle hierarchie nous permet de récupérer toutes les rubriques qui mènent de la racine du site à la rubrique parente trouvée.

Jusque là rien de bien révolutionnaire, le code correspond au code du menu hiérarchique de base. Le truc, alors, consiste à remplacer le lien sur la rubrique en cours par une liste déroulante contenant toutes les rubriques de même niveau. Voici les explications correspondantes :

-  On crée le champ liste avec le code javascript permettant de changer de page à chaque sélection d’une ligne.
-  La boucle combo nous permet de récupérer toutes les rubriques appartenant au même niveau que la rubrique principale de la page.
-  Le remplissage de la liste déroulante est fait à l’intérieur d’un bout de code en PHP. Ceci est nécessaire pour pourvoir sélectionner la rubrique actuelle dans la liste.

Pour fonctionner ce code doit être inséré à l’intérieure de la boucle principale de la page dans laquelle il figure.

Exemple pour une page affichant le contenu d’une rubrique :


<BOUCLE_principale(RUBRIQUES){id_rubrique}>
 <Début de la page>
 <Insérer ici la boucle Hiérarchie>
 <Suite et fin de la page>
</BOUCLE_principale>

Ce script est utilisé sur Spip’eur, uniquement sur les pages rubriques.
Sur les pages articles, je pense (mais cela n’engage que moi) qu’il vaut mieux conserver le menu hiérarchique standard, pour pouvoir facilement retourner sur la rubrique à laquelle l’article consulté appartient.
Si ici ce script n’est pas utilisé sur les pages articles, ce n’est pas à cause d’une incompatibilité mais suite à un choix personnel.


Spip’eur - Scripts, articles, ressources, astuces pour SPIP http://spipeur.free.fr/article.php3?id_article=9