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.

Dernière modification de cette page le 6 décembre 2006

Discussion

7 discussions

  • 6

    bonjour

    Cette contrib m’interresse fortement, mais elle ne marche pas chez moi.

    J’ai fai l’installation et s’affiche à l’ecran les rubrique racine mais pas les sous rubrique

    Je ne comprend pas pourquoi.

    • sur quelle page ?

      tu l’as installé où ? comment ?

    • j’ai fait comme tu as dit

      les deux fichiers dnas le dossier squelette

      le « inclure » dans mon espace menu

      La seule variante avec toi vient des css .

      Donc en fait tout comme toi

      et ça ne m’affiche que les rubriques racine

    • je repose les questions :

      1. quels squelettes (rubrique, article, sommaire)
      2. dans quelle boucle ?
    • il faut absolument, pour faire le :

      <inclure(menu.php3) {id_rubrique}>

      qu’il y ait un id_rubrique dans le contexte, sinon, il n’affichera que les rubriques à la racine.

      -  Sur le sommaire, il n’y a pas moyen, mais c’est normal, on veut juste les rubriques à la racine.
      -  Sur la page rubrique, l’id_rubrique vient de l’url.
      -  Sur la page article et breve, il n’y a pas d’id_rubrique dans l’url. Il faut donc récupérer l’id_rubrique depuis la boucle ARTICLES principale de la page.

    • Bonjour
      Désolé deprendre une vieille question de Philippe mais je n’arrive pas à obtenir autre chose que les secteur quand je suis dans unarticle. Que voulez dire par « Il faut donc récupérer l’id_rubrique depuis la boucle ARTICLES principale de la ... »
      Pourriez-vous me donnez l’exemple de code type. ça fait 24 h que je bute. j’ai le ventre en boule...
      Merci beaucoup

    • Bon j’ai trouvé mais j’ai maintenant je crois un problème plus complexe :
      Je me sert de cette inclusion pour afficher dans les pages articles un sous-menu du secteur (en complément du menu déroulant horizontal principal). Il devrait ressembler à ceci :
      -  1 Secteur en cours
      -----a Rubrique en cours
      ---------I Sous rubrique
      --------------0 article en cours
      --------------00... autres artiles
      ---------------....
      ----------I.... autres sous rubriques
      ----------...
      ------b ..... autres Rubriques
      ------.....
      J’ai introduit la boucle pour les articles ça fonctionne si ils sont dans les rubriques. Le PROBLEME c’est quand les articles sont dans des sous-rubriques alors le résultat s’arrête au dernier article de la sous-rubrique en cours et ne veut pas lister les autres rubriques et sous rubriques.
      Voici le code :

      <div id="menu_int">
      <div id="accueil"><a href="#URL_SITE_SPIP/"><:accueil_site:></a></div>
      <B_menu>
              <ul id="sections">
                      <BOUCLE_menu(RUBRIQUES) {par num titre}{id_rubrique}>
                      <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_marticles>
                                      <BOUCLE_marticles(ARTICLES) {id_rubrique} {par num titre}>
                                              <ul>
                                                      <li class="menu">
                                                      <a [class="menu(#EXPOSER)"] title="#DESCRIPTIF" href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a>
                                                      </li>
                                              </ul>
                                      </BOUCLE_marticles>
                                      </B_marticles>
                              <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>

      MERCI BEAUCOUP AU CAS OU ....

    Répondre à ce message

  • 2

    Bonjour à tous, je suis sur un projet et je viens ici pour demander de l’aide. En fait, je cherche à creer un menu comme celui-ci :

    > Rubrique1 courante
    >>> article1
    >>> article2
    >>> ... article_n
    > Rubrique2
    > Rubrique3
    > ... Rubrique_n

    Merci d’avance pour votre aide

    • Mortimer

      tu veux certainement poser cette question là où il y aura des réponses : spip@rezo.net

    • Merci, je vais le faire tout de suite

    Répondre à ce message

  • 6

    Bonjour

    J’utilise dans mon squelette le script de Nicolas Hoizey Une arborescence dynamique et contextuelle
    Pour mon squelette, j’utilise les secteurs pour differencier les langues et les rubriques de second niveau sont affichées dans un menu horizontal, en haut de mes pages. Le menu doit donc seulement afficher les rubriques de troisième niveau et plus. J’ai réussi à bricoler le script de Nicolas Hoizey pour afficher ce que je souhaite, mais c’est du bricolage et ca ne me plait pas. En plus j’essaie que mes pages soient XHTML 1.0 Transitional et avec ce menu fait de tableaux...
    Penses tu que ton menu soit adaptable à ce que je veux faire ? Si oui pourrais tu me lancer sur une piste ?
    J’ai imaginé une boucle hierarchie avec un critère du style (1,1) mais je ne vois pas très bien ou ca va me mener.

    Merci pour tout

    Arhtur

    • Il faut tester, mais oui je pense que ton idée est bonne,

      -  entoure le tout d’une boucle RUBRIQUES avec seulement le critère {id_rubrique}
      -  remplace {racine} par {id_parent=#ID_SECTEUR}
      -  remplace

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


      par

      <BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}}>
      <BOUCLE_current_sect(HIERARCHIE) {id_rubrique} {1,1}>


      -  remplace
      </BOUCLE_current>
      par
      </BOUCLE_current_sect></BOUCLE_current>

    • J’ai un problème similaire :
      Je voudrais mettre les rubriques du niveau 2 en menu horizontal et les sous-rubriques respectifs du niveau 3 et 4 dans un menu vertical. A la racine il n’y a que des secteurs par langue ; il ne faut pas les afficher.

      • 1 Research (= invisible)
        • 2 Publications (= menu horizontal entête + répété dans le menu vertical à gauche)
          • 3 Book Review (= menu vertical à gauche)
          • 3 Technical Report & Theses
      • Teaching
      • Software

      Comment faire ? Merci pour toute suggestion.

    • Heu, je suis pas sûr de comprendre... ce n’est pas ce qui est expliqué juste au dessus ?

    • Je ne crois pas ; mon problème est plutot l’inverse : je voudrais afficher à tout moment, dans les rubriques aussi bien que dans les articles, les sous-rubriques des niveaux 2 et 3 du secteur 1, sans afficher le secteur même.

    • Je me suis trompé, j’avais lu ’au dessous’. En effet c’est le même problème, mais je n’arrive pas à m’en sortir...

    • En fait, ça ne fonctionne pas chez moi :
      Si on fait cette partie de la modif

      remplace
      
      <BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}} {id_secteur}>
      
      par
      
      <BOUCLE_current(RUBRIQUES) {id_rubrique=#ENV{id_rubrique}}>
      <BOUCLE_current_sect(HIERARCHIE) {id_rubrique} {1,1}>
      
      - remplace </BOUCLE_current>
      par </BOUCLE_current_sect></BOUCLE_current>

      ça n’affiche plus rien. Si on ne change pas cette partie du code d’origine, ça affiche bien l’arborescence à partir du secteur, mais en double ! ????

    Répondre à ce message

  • 2

    Bonjour,

    Le menu me donne toute satisfaction avec Spip 1.9.1
    J’aimerais néanmoins savoir si quelqu’un pourrait me donner un moyen simple d’exclure des rubriques du menu avec un mot-clé, comme je le fais habituellement, en utilisant :

    <BOUCLE_exclure_rubriques (RUBRIQUES){racine} {titre_mot=exclu} {doublons}></BOUCLE_exclure_rubriques>

    avec doublons dans ma boucle de navigation

    J’ai essayé de manipuler les boucles du menu mais sans succés. Un coup de main ?

    Merci.

    • Je le fais avec les doublons comme tu dis et ça marche bien.

      Avant la boucle de menu, j’ai :

      1. <BOUCLE_hide(RUBRIQUES) {id_mot=1} {doublons}> </BOUCLE_hide>

      et dans les boucles _menu, sister_before et sister_after j’ai le critère {doublons}

    • Effectivement, ça fonctionne. J’ai dû rêver ... ;o)
      Merci de ton aide.

    Répondre à ce message

  • 2

    Bonjour,

    j’ai installé ce très bon script le mixant avec la possibilité d’afficher directement l’article au lieu de la rubrique si cette derniere ne contientqu’un seul article... tout ceci fonctionne très.

    Maintenant, j’aimerais en fait transformer le script pour que les sous-menus et sous-sous-menus (voire plus encore) s’ouvrent quand on clique sur le titre, et non au survol de la souris. Voila, je sais que pour ça il faut modifier le javascript, en remplaçant notament les onmouseover par des onclick, mais ça suffit pas et il e faut certainement pas le faire partout. Pour expliquer exactement ce que je cherche à faire, c’est un menu qui se développe en colonne... Par exemple : 1re colonne=racine, 2e colonne= sous menu, 3e colonne sous-sous menu, etc.

    J’ai cherché partout des scripts, et je me suis résigné maintenant à essayer de partir d’un script différent puis le modifier, puisque je n’ai trouvé aucun script nulle part permettant de mettre en oeuvre ce que je cherche.

    J’espère que j’ai su me faire comprendre. Merci par avance !

    • tu ne postes pas au bon endroit, cette contribution propose un menu sans aucun javascript.

      poste ta question sur spip@rezo.net ou le forum de spip : http://forum.spip.org

    • Oups, oui pardon, c’est de ma faute, j’avais plusieurs pages ouvertes et je me suis trompé... désolé. Et merci pour la réponse

    Répondre à ce message

  • 2

    Bonjour,

    j’ai un comportement bizare.
    Le lien de la rubrique sélectionnée remonte dans la liste des sous rubriques ouvertes

    avec un menu :
    A
    A1
    A2
    A3

    si c’est le A3 qui est selectionné, il affiche
    A
    A3
    A1
    A2

    Et je ne crois pas que c’était le but vu le code, mais je ne trouve pas le problème. Si quelqu’un a idée...

    • sachant bien sure que mes rubriques sont dela forme « 1. A », « 2. A1 », « 3. A2 »...

    • Bonjour,

      j’ai exactement le même probleme...j’ai beau chercher, je ne vois pas d’où vient ce petit lézard

      La solution a t-elle été trouvée ?

      Merci

    Répondre à ce message

  • 1

    Deux petites corrections à apporter

    dans les ancres
    <a href="#URL_RIUBRIQUE" title="#DESCRIPTIF">

    remplacer par
    <a href="#URL_RIUBRIQUE" title="[(#DESCRIPTIF|textebrut|entites_html)]">

    dans la rubrique courrante l’ancre pourrait-être supprimée pour ne pas reboucler sur la rubrique en cours
    <li [class="(#EXPOSE{current})"]>#TITRE</li>

    Répondre à ce message

Ajouter un commentaire

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