SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Navigation > Menus contextuels

Boucle menu contextuel

samedi 19 novembre 2005, par mortimer. Dernier ajout mercredi 6 décembre 2006


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

Zip - 741 octets
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 :

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

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 :

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 :

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 :

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 :

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

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 :

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 :

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.


Répondre à cet article

  • Boucle menu contextuel

    23 août 2007 20:32, par mambou

    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

    Répondre à ce message

    Retour au début des forums

  • Boucle menu contextuel

    29 novembre 2005 17:23, par arhtur

    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

    Répondre à ce message

    • Boucle menu contextuel 4 décembre 2005 17:41, par mortimer

      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>

      Répondre à ce message

      • Boucle menu contextuel 16 février 2007 12:30, par L’instit

        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

    • Boucle menu contextuel 13 janvier 2007 13:26, par Hugues

      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.

      Répondre à ce message

      • Boucle menu contextuel 14 janvier 2007 14:10, par mortimer

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

        Répondre à ce message

        • Boucle menu contextuel 16 janvier 2007 15:15, par Hugues

          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.

          Répondre à ce message

    Retour au début des forums

  • Menu et Exclusion par mot-clé

    14 février 2007 18:38, par ouranos

    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.

    Répondre à ce message

    Retour au début des forums

  • menu avec onclick plutot que onmouseover

    19 octobre 2006 10:40, par kalimane

    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 !

    Répondre à ce message

    Retour au début des forums

  • Boucle menu contextuel

    24 janvier 2006 12:20, par acaton

    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...

    Répondre à ce message

    Retour au début des forums

  • Boucle menu contextuel

    1er décembre 2005 12:43, par cechat

    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

    Retour au début des forums

  • Boucle menu contextuel

    21 novembre 2005 14:42, par philippe

    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.

    Répondre à ce message

    • Boucle menu contextuel 21 novembre 2005 15:41, par mortimer

      sur quelle page ?

      tu l’as installé où ? comment ?

      Répondre à ce message

      • Boucle menu contextuel 21 novembre 2005 18:21, par philippe

        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

        Répondre à ce message

        • Boucle menu contextuel 22 novembre 2005 10:41, par mortimer

          je repose les questions :

          1. quels squelettes (rubrique, article, sommaire)
          2. dans quelle boucle ?

          Répondre à ce message

        • Boucle menu contextuel 22 novembre 2005 11:24, par mortimer

          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.

          Répondre à ce message

    Retour au début des forums

0 | 25



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net