Accueil du site > Navigation > Menus contextuels > Boucle menu contextuel

Boucle menu contextuel

19 novembre 2005 – par mortimer – 28

1 vote

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

Télécharger l’archive,
copier les deux fichiers dans votre répertoire squelettes,
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>

P.-S.

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.

Notes

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

[2] de même niveau.

Vos commentaires

# Le 21 novembre 2005 à 14:42, par philippe En réponse à : Boucle menu contextuel

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.
- # ^ Le 21 novembre 2005 à 15:41, par mortimer En réponse à : Boucle menu contextuel
  
  sur quelle page ?
  
  tu l’as installé où ? comment ?
- # ^ Le 21 novembre 2005 à 18:21, par philippe En réponse à : Boucle menu contextuel
  
  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
- # ^ Le 22 novembre 2005 à 10:41, par mortimer En réponse à : Boucle menu contextuel
  je repose les questions :
  
  quels squelettes (rubrique, article, sommaire)
  dans quelle boucle ?
- # ^ Le 22 novembre 2005 à 11:24, par mortimer En réponse à : Boucle menu contextuel
  
  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.
- # ^ Le 13 décembre 2009 à 17:21, par ARTIE En réponse à : Boucle menu contextuel
  
  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
- # ^ Le 13 décembre 2009 à 22:28, par ARTIE En réponse à : Boucle menu contextuel
  
  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
# Le 23 août 2007 à 20:32, par mambou En réponse à : Boucle menu contextuel

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
- # ^ Le 23 août 2007 à 22:45, par Mortimer En réponse à : Boucle menu contextuel
  
  tu veux certainement poser cette question là où il y aura des réponses : spip@rezo.net
- # ^ Le 24 août 2007 à 11:28, par mambou En réponse à : Boucle menu contextuel
  
  Merci, je vais le faire tout de suite
Répondre à ce message
# Le 29 novembre 2005 à 17:23, par arhtur En réponse à : Boucle menu contextuel

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
- # ^ Le 4 décembre 2005 à 17:41, par mortimer En réponse à : Boucle menu contextuel
  
  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>
- # ^ Le 13 janvier 2007 à 13:26, par Hugues En réponse à : Boucle menu contextuel
  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.
- # ^ Le 14 janvier 2007 à 14:10, par mortimer En réponse à : Boucle menu contextuel
  
  Heu, je suis pas sûr de comprendre... ce n’est pas ce qui est expliqué juste au dessus ?
- # ^ Le 16 janvier 2007 à 15:15, par Hugues En réponse à : Boucle menu contextuel
  
  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.
- # ^ Le 16 janvier 2007 à 15:23, par Hugues En réponse à : Boucle menu contextuel
  
  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...
- # ^ Le 16 février 2007 à 12:30, par L’instit En réponse à : Boucle menu contextuel
  
  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
# Le 14 février 2007 à 18:38, par ouranos En réponse à : Menu et Exclusion par mot-clé

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.
- # ^ Le 14 février 2007 à 20:08, par mortimer En réponse à : Menu et Exclusion par mot-clé
  
  Je le fais avec les doublons comme tu dis et ça marche bien.
  
  Avant la boucle de menu, j’ai :
  
  <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}
- # ^ Le 15 février 2007 à 13:16, par ouranos En réponse à : Menu et Exclusion par mot-clé
  
  Effectivement, ça fonctionne. J’ai dû rêver ... ;o)
  Merci de ton aide.
Répondre à ce message
# Le 19 octobre 2006 à 10:40, par kalimane En réponse à : menu avec onclick plutot que onmouseover

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 : 1ere 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 !
- # ^ Le 19 octobre 2006 à 12:15, par mortimer En réponse à : menu avec onclick plutot que onmouseover
  
  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
- # ^ Le 19 octobre 2006 à 14:51, par kalimane En réponse à : menu avec onclick plutot que onmouseover
  
  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
# Le 24 janvier 2006 à 12:20, par acatonne En réponse à : Boucle menu contextuel

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...
- # ^ Le 25 janvier 2006 à 10:01, par acatonne En réponse à : Boucle menu contextuel
  
  sachant bien sure que mes rubriques sont dela forme « 1. A », « 2. A1 », « 3. A2 »...
- # ^ Le 24 février 2006 à 13:16, par Dany En réponse à : Boucle menu contextuel
  
  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
# Le 1er décembre 2005 à 12:43, par cogefip En réponse à : Boucle menu contextuel

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>
- # ^ Le 4 décembre 2005 à 18:49, par cogefip En réponse à : Boucle menu contextuel
  
  La boucle complète dans les variantes
Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Courriel (non publié)

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message

Ajouter un document

gif, jpg, png

SPIP-Contrib

Boucle menu contextuel

Principe

Exemple

Utilisation

Styles

Comment ça marche ?

P.-S.

Notes

Rubriques

Derniers commentaires

Compatibilité

Téléchargement(s)

Menus contextuels

Vos commentaires

Répondre à cet article

Ça discute par ici

Formulaire de contact libre

Plugin Mot de Passe Compliqué

Navigation AJAX

Plugin Vidéo(s)

Plugin SPIPAL

Ça spipe par là

SPIP Blog

SPIP Party

SPIP Forums

SPIP-Zone

SPIP SVN