Spip’eur - Scripts, articles, ressources, astuces pour SPIP
  
Vous êtes ici : Accueil > Spip > Boucles et modules pour Spip
Boucles, modules, exemples, sources pour SpipVous trouverez ici des boucles, modules et autre exemples de sources que vous pouvez utiliser dans vos sites construits avec Spip.
Spip
  Astuces pour sites ’Spiper’
  Boucles et modules pour Spip
  Spip hébergé chez Free
Logiciels
  Outils internet
  Programmation
  Scripts PHP
  Utilitaire
 
 
Dans la même rubrique
 
Vu sur Google

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

Par Eric, le mardi 25 novembre 2003. Version imprimable   Envoyer cet article à un(e) ami(e)  
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.


Version imprimable   Envoyer cet article à un(e) ami(e)   Haut de la page  
Poster un commentaire
Un menu hiérarchique ’évolué’ pour une navigation encore plus facile
Le dimanche 14 décembre 2008

Je vais passer pour un rabat-joie, mais je pense que tu devrais éditer ton script pour remplacer : Acceuil par Accueil .

Répondre à ce message

    Un menu hiérarchique ’évolué’ pour une navigation encore plus facile
    Le jeudi 8 janvier 2009, par Eric

    Euh ... Oui en effet c’est mieux comme ça ...

    Merci



    Répondre à ce message

Un menu hiérarchique ’évolué’ pour une navigation encore plus facile
Le jeudi 12 juin 2008, par Clorr

hello !

Cet article n’est pas des plus recents, mais est bien utile. Petite modif que l’on peut faire aujourd’hui :

Au lieu d’utiliser la boucle php, on peut utiliser #EXPOSE pour mettre le selected

Code :

<option value=’#URL_RUBRIQUE’ [(#EXPOSE|selected="selected")]>[(#TITRE|supprimer_numero)]</option>" ;



Répondre à ce message


Poster un commentaire Haut de la page
 
Nous contacter - Site construit avec SPIP 1.8.3