Boucle menu contextuel

Voilà encore une boucle pour un menu qui affiche : la liste des rubriques à la racine, la liste des sous rubriques de la rubrique actuelle et ses rubriques soeurs dans des listes imbriquées comme il faut.

Principe

Voici donc une boucle pour afficher un menu en fonction du contexte de la page.

La boucle affiche, dans des listes imbriquées représentant la hiérarchie du site :

  • les rubriques à la racine,
  • les rubriques parentes de la rubrique actuelle,
  • les rubriques soeurs de la rubrique actuelle,
  • les rubriques filles de la rubrique actuelle.
    Tout cela quelque soit le niveau de la rubrique actuelle et sans javascript.

Comme cela, on dirait que ça fait beaucoup, mais en fait, c’est un menu comme on l’attend pour savoir où on est et naviguer localement autour de la rubrique où l’on se trouve.

Exemple

Par exemple, on pourra voir un menu comme cela :

  • Research
  • Teaching
  • Software

si on est à la racine du site.

Puis, quand on descend dans une des sous rubriques, on pourra voir, par exemple :

  • Research
    • Publications
      • Book Review
      • Technical Report & Theses
  • Teaching
  • Software

Utilisation

Squelette à inclure
  1. Télécharger l’archive,
  2. copier les deux fichiers dans votre répertoire squelettes,
  3. faite un inclure, en passant l’id de la rubrique actuelle [1], où vous voulez dans vos squelettes :
    <INCLURE(menu.php3) {id_rubrique}>

Styles

Le menu sort simplement des listes imbriquées dans une div. La div a comme id menu et le ul « racine » l’id sections.

La rubrique courante aura comme id current pour pouvoir être exposée.

On peut donc adopter un style très simple du genre :

#menu ul {
   margin: 0;
   padding: 0;
}

#menu li {
   list-style-type: none;
}

#menu a.current {
   font-weight: bold;
}

#menu * li ul {
  margin-left: 1em;
}

Comment ça marche ?

Voici quelques explications sur le fonctionnement de cette boucle. On va donc commencer par le code :

<div id="menu">

<B_menu>
<ul id="sections">
<BOUCLE_menu(RUBRIQUES) {par num titre}{racine}>
<BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}} {id_secteur}>
<BOUCLE_hier(HIERARCHIE) {id_rubrique}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a><ul>
</BOUCLE_hier>
<BOUCLE_sister_before(RUBRIQUES) {meme_parent} {par num titre} {titre<=#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_before>
</B_hier>

<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF"  [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a>

<B_sub_rub>
<ul>
<BOUCLE_sub_rub(RUBRIQUES) {id_parent}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sub_rub>
</ul>
</B_sub_rub>
</li>

<B_hier_close>
<BOUCLE_sister_after(RUBRIQUES) {meme_parent}  {par num titre} {titre>#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_after>
<BOUCLE_hier_close(HIERARCHIE) {id_rubrique}>
</ul></li>
</BOUCLE_hier_close>
</BOUCLE_current>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF"  [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a></li>
<//B_current>
</BOUCLE_menu>
</ul>
</B_menu>

</div>

Pour commencer, la boucle parcourt toutes les rubriques à la racine du site :

<BOUCLE_menu(RUBRIQUES) {par num titre}{racine}>

Pour chacune de ces rubriques, on regarde si la rubrique actuelle (celle spécifiée par la variable passée à l’inclure et retournée par #ENV{id_rubrique}) est dans ce secteur :

<BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}} {id_secteur}>

si c’est le cas, alors cette boucle aura choisi la rubrique courante. Il nous faut maintenant afficher les rubriques entre la racine et la rubrique courante, c’est ce que fait la boucle hiérarchie :

<BOUCLE_hier(HIERARCHIE) {id_rubrique}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a><ul>
</BOUCLE_hier>

Remarquez que l’on ouvre des entrées de liste (LI) et des sous listes (UL)

.

On est donc au niveau de notre rubrique, c’est là qu’il faut afficher les informations sur celle ci. Mais d’abord, on veut afficher ses rubriques soeurs [2] qui doivent apparaître avant :

 <BOUCLE_sister_before(RUBRIQUES) {meme_parent} {par num titre} {titre<=#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_before>

Remarquez que l’on n’affiche ces rubriques que si la boucle hiérarchie a retourné un résultat, donc si l’on se trouve sous la racine. En effet, la boucle _menu affiche déjà les rubriques soeurs de la rubrique actuelle si on se trouve à la racine.

On peut enfin afficher le titre de la rubrique actuelle et ses sous rubriques :

<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF"  [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a>

<B_sub_rub>
<ul>
<BOUCLE_sub_rub(RUBRIQUES) {id_parent}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sub_rub>
</ul>
</B_sub_rub>
</li>

Comme avec la boucle _sister_before, on affiche le reste des rubriques soeurs qui sont classées après la rubrique actuelle :

<BOUCLE_sister_after(RUBRIQUES) {meme_parent}  {par num titre} {titre>#TITRE} {exclus}>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF">[(#TITRE|supprimer_numero)]</a></li>
</BOUCLE_sister_after>

Ici encore, on n’affiche ces rubriques que si l’on n’est pas à la racine grâce au code optionnel avant de la boucle hiérarchie qui suit.

Comme on a ouvert toute la hiérarchie de li et ul avec la première boucle _hier, il nous faut fermer toutes ces balises :

<BOUCLE_hier_close(HIERARCHIE) {id_rubrique}>
</ul></li>
</BOUCLE_hier_close>

On finit ainsi la boucle d’affichage de la rubrique courante. Si on n’a pas affiché la rubrique courante, alors on est sur un autre secteur à la racine et on doit encore afficher le titre du secteur :

</BOUCLE_current>
<li><a href="#URL_RUBRIQUE" title="#DESCRIPTIF"  [class="(#EXPOSE{current})"]>[(#TITRE|supprimer_numero)]</a></li>
<//B_current>

Notes

[1vous pouvez aussi l’inclure sans passer d’id_rubrique, par exemple sur le sommaire, alors seules les rubriques de la racine s’afficheront.

[2de même niveau.

Les rubriques sont classées par numéros dans le titre. Vous pouvez donc nommer vos rubriques « 1. Rubrique 1 », « 2. rubrique 2 », etc. pour décider de l’ordre d’apparition.

Si vous ne faites pas cela, les rubriques seront classées par ordre alphabétique.

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom