Menu dépliant arborescent PureDOMExplorer

Publié le : 16 mars 2007 – Dernière modification le 21 décembre 2021 – par rpapa – 65 commentaires

1
2
3
4
5
5 votes
Menu dépliant arborescent associant boucles SPIP et du javascript pour réaliser une menu respectueux du DOM

Préliminaires

Le menu proposé est basé sur le script proposé sur le site OnlineTools

Sites exemples :
-  site de test de la donation lou-salomé
-  Sciences -indus en CPPGE

Principe

Le menu est une liste <ul>  <li>.....</li>  </ul>   associée à la classe pde de la forme suivante :

<ul class="pde">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a>
    <ul>	
      <li><a href="#">Link 3_1</a></li>
      <li><a href="#">Link 3_2</a>
        <ul>
          <li><a href="#">Link 3_2_1</a></li>
          <li><a href="#">Link 3_2_2</a></li>
          <li><a href="#">Link 3_2_3</a></li>
          <li><a href="#">Link 3_2_4</a></li>
        </ul>
      </li>
      <li><a href="#">Link 3_3</a></li>
      <li><a href="#">Link 3_4</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
</ul>

Le script associé pde.js (PureDomExplorer) va reconnaître chaque item de la liste possédant une sous liste et lui associer la classe « parent ». Le script va aussi associer les classes « hide » et « show » permettant de rendre visible ou non la sous liste.

Les Boucles

Version rubriques seules

<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
	<BOUCLE_smenu1(RUBRIQUES){racine}{par num titre}{doublons}>
  <li>
  <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
  [(#TITRE|supprimer_numero)]</a>
		<B_smenu2><ul [class="(#EXPOSE{show,hide})"]>
			<BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre}>
      <li><a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
      [(#TITRE|supprimer_numero)]</a>
					<BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu>
			</li>
      </BOUCLE_smenu2>
		</ul>
    </B_smenu2>
	</li></BOUCLE_smenu1>
</ul>

Les boucles ci-dessus sont des boucles classiques de génération de menu, la seule particularité réside dans la balise #EXPOSE qui va attribuer la classe « hide » ou la classe « show » si la rubrique est la rubrique courante.

Version rubriques + articles

Cette version du menu liste intègre les articles dans le menu et permet d’avoir un plan dépliant du site. Cette version est visible sur le site de lou-salomé

<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
	   <BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{doublons}>
	    <li>  <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
            [(#TITRE|supprimer_numero)]</a>
          <B_sous-menu>
          <ul [class="(#EXPOSE{show,hide})"]>
          <BOUCLE_sous-menu(RUBRIQUES){id_parent}{par num titre}{doublons}>
           <li class="sousrub"> <a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero)]</a>
					 <BOUCLE_recursive(boucle_sous-menu)></BOUCLE_recursive> </li>
          </BOUCLE_sous-menu>
           <BOUCLE_art1(ARTICLES){id_rubrique}>
                 <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero|couper{20})]</a></li>
           </BOUCLE_art1>
          </ul>
          </B_sous-menu>
           <B_art2>
           <ul [class="(#EXPOSE{show,hide})"]>
           <BOUCLE_art2(ARTICLES){id_rubrique}>
                 <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero|couper{20})]</a></li>
           </BOUCLE_art2>
           </ul>
            </B_art2>
          <//B_sous-menu>
      </li>
 	   </BOUCLE_menu-racine>
</ul>

Installation

Copier dans votre répertoire squelettes les trois fichiers du zip et les deux images (minus.gif et plus.gif)

  • le squelette menu-pde.html
  • la feuille de style à personaliser
  • le squelette javascript pde.js.html

Modifier vos squelettes afin d’inclure le menu

  • dans rubrique.html et sommaire.html
    <INCLURE {fond=menu-pde}{id_rubrique}>
  • dans sommaire.html et dans tous les squelettes qui n’ont pas de numéro de rubrique <INCLURE {fond=menu-pde}{id_rubrique=0}>
  • dans article.html, il faut créer une boucle englobante pour récupérer l’id de la rubrique 
    <BOUCLE_art-menu(ARTICLES){id_article}>
<INCLURE {fond=menu-pde}{id_rubrique}> 
</BOUCLE_art-menu>

Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :

<style type="text/css">	@import '#CHEMIN{pde.css}';	
    </style>
<script type="text/javascript" src="spip.php?page=pde.js">
    </script>

On remarquera l’appel du script via la commande spip.php?page=pde.js", le script comportant des balises spip, il est nécessaire d’évaluer ces balises.

Evolutions

  1. L’évolution à prévoir est de modifier le script afin d’utiliser la librairie Jquery plutot qu’un nouveau script indépendant. N’hésitez pas à proposer cette évolution.
  2. Mettre le menu en plugin

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

22 discussions

  • spipfactory

    Bonjour a vous ; je reprend le travail de l’ancien webmestre.

    Ayant quelque lacune en spip, je doit avouer que je comprend pas bien ou pêche mon menu ; une aide serait apprécier, merci.

    Mon probléme :
    sur le site www.bachant.info on n’a bien le menu qui s’affiche ; mais si j’ouvre une des deuwx rubrique le menu s’affiche replié .
    Est ce normal ?
    de plus dans la rubrique impossible de déplier la rubrique dans laquelle on se trouve.
    est ce normal ?

    Peut t’on avoir la rubrique ou l’article sélectionner d’une autre couleur afin de savoir ou l’on se trouve.

    En attente de vous lire
    @micalement stéphane

    Répondre à ce message

  • 7
    Michel

    Je n’avais pas mis l’adresse du site, la voici : Lycée Clos Maire

    Désolé pour le double post de l’autre jour.
    Le problème subsiste sous IE mais tout fonctionne correctement sous Mozilla, existe t’il un patch pour Internet Explorer ?

    • Michel

      Je remets mon post qui est apparemment passé inapercu vu que je l’avais posté par erreur dans un autre sujet :

      « Bonjour, j’ai un peu le même problême que Jonas, mais quelque peu différent. à savoir que le menu se déplie correctement, puis je peux cliquer sur une rubrique et refermer le menu :jusque là tout va bien mais une fois cela fait, impossible de réouvrir le menu à nouveau sans rafraîchir l’écran ou passer par l’accueil du site : c’est bien gênant

      Comment solutionner ce problème ?
      merci d’avance »}

      PS : merci aux admins d’effacer les posts redondants

    • Quel navigateur ?
      quelle version de spip ?

      je ne peux pas comme-ça répondre à ta question

    • pour le site du lycée clos maire, je ne vois pas de pb sous firefox, effectivement sous IE6 il y a un pb mais je ne sais pas le résoudre,

      as-tu vérifié sous IE7

    • Oui c’est bien IE6, je n’ai pas testé avec la version 7
      Mais apparemment IE6 pose le même problème à tous les sites qui ont ce menu (magnifique au demeurant)
      Au passage ça détecte également des « erreurs » sur la page qui n’y sont pas sous Mozilla

      Ce qui m’embête un peu, c’est qu’une majorité des utilisateurs doit posséder IE
      Enfin au pire, on peut mettre une notification comme quoi le site est optimisé pour firefox ^^

    • Michel

      Version de Spip 1.9.1 [7502]
      Squelette Sarka Spip : 1.9.1 [163]

    • Testé sous IE7 : même problème.

    • FredL

      J’ai fait le test avec Opera 9.23 et le problème est le même. Il semble qu’il n’y ait que Firefox qui plie et déplie correctement ce menu...

    Répondre à ce message

  • spipfactory

    je viens de constater un truc ; est ce un bug ou suis je moi même buggé aujourd’hui.

    Lorsque je date un article en 2008 dans une rubrique ; le menu n’affiche pas la rubrique.

    Jusque la c’est normal........

    mais si dans la configuration de spip ; je dit :

    Publier les articles, quelle que soit leur date de publication.

    le menu ne m’affiche pas la rubrique ;

    et la cela ne me parait pas normal ?

    Une idée ; une piste.

    ps/
    le site en question : http://bachant.free.fr/

    la rubrique avec des articles en 2007
    Association B@CH@NT
    la rubrique avec les articles 2008
    Ville de BACHANT
    le site configuré : Publier les articles, quelle que soit leur date de publication.

    Répondre à ce message

  • Yffic

    Bonjour

    Petite erreur dans le zip avec article (l’autre je ne sais pas) : le fichier image « - » s’appelle minus.gif, mais dans le script js on fait reference a moins.gif

    Répondre à ce message

  • 5
    jonas

    Tout d’abord bravo pour ce menu.

    J’éspère ne pas être inconvenant en vos posant ma question d’ultra débutant que je suis malheureusement.

    J’ai constaté sur les sites de démonstration du menu, que lorsqu’on déplie une rubrique par exemple et qu’ensuite on clique sur un article (ou sous rubrique) lorsque la nouvelle page est chargée, le menu conserve le « dépliement » de l’arborescence concernée.

    J’ai installé le menu sur un site test en local et malheureusement cela ne marche pas à ce niveau là pour moi, c’est à dire que le menu se replie automatiquement à chaque chargement de page cliquée

    Comment faire ?
    D’avance un immense merci !

    • rpapa

      plusieurs questions
      -  as-tu chargé le javascript
      -  passe-tu l’id de la rubrique dans ton inclure
      -  quelle version de spip utilises-tu

    • jonas

      pour le javascript , j’ai fait l’appel dans l’entete comme c’est expliqué plus haut.
      Pour l’id de la rubrique j’ai mis ceci dans le squelette rubrique.html , à l’endroit du menu. Et la version de spip est 1.9

    • spipfactory

      ton message n’est pas complet ; je pense ....

      mais cela peut t’il t’aider ?

      tu ouvre ton fichier inc_head avec ton editeur de texte celui dans ton repertoire /squelettes et a la fin tu copie le code ci-dessous :

      [(#REM) Menu dépliant arborescent PureDOMExplorer]
<style type="text/css">	@import '#CHEMIN{pde.css}';	</style>
<script type="text/javascript" src="spip.php?page=pde.js"></script>

      puis dans la page sommaire a l’endroit ou tu souhaite afficher le squelette :

      [(#REM) Menu de navigation par rubriques ]
<INCLURE{fond=menu-pde} {lang}>

      cela doit fonctionner normalement.....

    • Michel

      Bonjour, j’ai un peu le même problême que Jonas, mais quelque peu différent.
      à savoir que le menu se déplie correctement, puis je peux cliquer sur une rubrique et refermer le menu :jusque là tout va bien mais une fois cela fait, impossible de réouvrir le menu à nouveau sans rafraîchir l’écran ou passer par l’accueil du site : c’est bien gênant

      Comment solutionner ce problème ?

      merci d’avance

    • Michel

      Bonjour, j’ai un peu le même problême que Jonas, mais quelque peu différent.
      à savoir que le menu se déplie correctement, puis je peux cliquer sur une rubrique et refermer le menu :jusque là tout va bien mais une fois cela fait, impossible de réouvrir le menu à nouveau sans rafraîchir l’écran ou passer par l’accueil du site : c’est bien gênant

      Comment solutionner ce problème ?

      merci d’avance

    Répondre à ce message

  • 3
    jean christophe

    Bonjour

    Pas de puces et ça me gratte quand même !

    Bon, j’ai recopié le code dans mon fichier inc-menu, recopié les appels aux CSS et javascript comme il est dit, mis le js dans squelettes et exclus les rubriques que je voulais, mis les images dans images/menu/, change l’appel à ces images en remplaçant dans openImage :’#CHEMINminus.gif’ par
    openImage :’#CHEMINimages/menu/minus.gif’, rajouté id_rubrique=0 à mon inclure

    Le menu s’affiche avec les bonnes rubriques mais sans puce et à la place j’ai « fermer la section » et ... je ne sais plus quoi faire

    Où j’ai faux ? Qu’ai-je oublié ?

    PS : je suis en 1.9.0

    • tu dois déclarer dans mes_options.php (dans /config) ton répertoire /menu afin que la balise #CHEMIN explore aussi ce répertoire
      avec une commande

      <?php
$GLOBALS['dossier_squelettes'] = "squelettes:squelettes/menu;
?>

      A+

    • jean christophe

      ce serait nécessaire si je ne changeais pas le code après la balise CHEMIN mais comme j’indique dans quel répertoire il faut aller chercher les images, ça ne me paraît pas utile.

    • L’instit

      Dans le fichier pde.js.html, l’image appelée est moins.gif et pas minus.gif. renomme ton fichier gif (j’ai eu le même souci)

    Répondre à ce message

  • 2
    spipfactory

    Bon une petite merveille ce truc ; mais j’aime bien faut toujours un mais...

    Comment faire en sorte que dans le menu si il y a une rubrique avec un article et des sous rubriques faire en sorte que lorsque l’on clic sur la rubrique l’article s’affiche automatiquement ?

    merci

    ps :/ j’ai essayé divers truc mais c’est raté....

    voir : lorsque je clic sur : http://bachant.free.fr/spip.php?rubrique37
    je souhaite que s’affiche : http://bachant.free.fr/spip.php?article49

    est ce jouable ?

    • Robert Papanicola

      oui bien sûr mais ce n’est pas géré par ce menu mais par une boucle que tu vas installer dans ton squelette rubrique qui vas rediriger ta rubrique vers l’article seul

      <B_un_seul>
<BOUCLE_un_seul(ARTICLES){id_rubrique}{1,1}>
</BOUCLE_un_seul>
<INCLURE{fond='inc_contenu-rubrique'}{id_rubrique}>
</B_un_seul>
            <BOUCLE_le_seul(ARTICLES){id_rubrique}{0,1}>
            <INCLURE{fond='contenu-article'}{id_article}>
            </BOUCLE_le_seul>
            </B_le_seul>
            <INCLURE{fond='inc_contenu-rubrique'}{id_rubrique}>
            <//B_le_seul>

<//B_un_seul>

      A+

    • spipfactory

      la noisette

      inc-triurlrubrique.html du squelette de spip-contrib ; A mettre à la place de URL_RUBRIQUE dans une boucle construisant un menu ou un fil d’ariane…

      Nous avons retenu cette solution proposé par « stanislas » Je résume :

      -  Dans ton dossier squelettes, tu dois avoir un fichier inc-triurlrubrique.html dont le contenu est celui-ci-dessous

      #CACHE{120}
[(#REM) inclusion pour tri url rubrique
pour faciliter la navigation, Spip-contrib ayant beaucoup de 
rubrique-dossier
avec un seul article
si seul article de premier niveau
et pas de sous-rubrique
alors url rubrique = url article
sinon (tout autre cas, par exemple rubrique vide) alors url rubrique = 
url rubrique
INCLURE toujours places dans une boucle rubrique ]

<BOUCLE_contexte_rubrique(RUBRIQUES){id_rubrique}>

[(#REM) test sur nombre d'articles]
    <BOUCLE_articles_plusdun(ARTICLES){id_rubrique}{1,1}>
          [(#_contexte_rubrique:URL_RUBRIQUE)]
    </BOUCLE_articles_plusdun></B_articles_plusdun>
   
        <BOUCLE_articles_unseul(ARTICLES){id_rubrique}{0,1}>
       
[(#REM) test sur presence sous-rubriques]
            <BOUCLE_test_sousrubrique(RUBRIQUES){id_parent}>
            </BOUCLE_test_sousrubrique>
                [(#_contexte_rubrique:URL_RUBRIQUE)]
            </B_test_sousrubrique>
                    [(#_articles_unseul:URL_ARTICLE)]
            <//B_test_sousrubrique>
           
        </BOUCLE_articles_unseul></B_articles_unseul>
              [(#_contexte_rubrique:URL_RUBRIQUE)]
        <//B_articles_unseul>
       
    <//B_articles_plusdun>
   
</BOUCLE_contexte_rubrique>

      Voici donc le fichier inclure de spip-contrib. (attention, j’ai retiré les boucles de syndication dont je n’avais pas utilité)

      Dans notre cas nous avons modifier le fichier menu-pde.html

      <BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus> 
<ul class="pde"> 
   <BOUCLE_smenu1(RUBRIQUES){racine}{par num titre}{doublons}> 
 <li> 
 <a href="<INCLURE{fond=inc-triurlrubrique}{id_rubrique}>" > [(#TITRE|supprimer_numero)]</a> 
       <B_smenu2><ul [class="(#EXPOSE{show,hide})"]> 
           <BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre}> 
     <li><a href="<INCLURE{fond=inc-triurlrubrique}{id_rubrique}>" >[(#TITRE|supprimer_numero)]</a> 
                   <BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu> 
           </li> 
     </BOUCLE_smenu2> 
       </ul> 
   </B_smenu2> 
   </li></BOUCLE_smenu1> 
</ul>

      cad remplacer #URL_RUBRIQUE par l’inclusion du fichier de tri des url

      -  Donc à la place de <a href="#URL_RUBRIQUE" > #TITRE</a> ; j’ai <a href="<INCLURE{fond=inc-triurlrubrique}{id_rubrique}>" > #TITRE</a>

      — -

    Répondre à ce message

  • 1
    JLuc

    Par contre, j’aimerais bien qu’il y ait une puce (différente des autres, un petit triangle noir ou un rond par exempl) au début des rubriques sans sousrubrique, afin que toutes les rubriques dans une même rubrique aient un début marqué et commencent à la même distance de la gauche.

    Mais c’est un peu complexe avec le script qui modifie certaines css au vol alors quelqu’un a t il réussi ?

    • JLuc

      La difficulté est que le script ne change pas les css pour inclure une puce « déplier » ou « replier », mais qu’il insère carrément une image !!!!

    Répondre à ce message

  • JLuc

    Pour info, dans le même genre mais un peu plus complexe, ya aussi
    http://www.spip-contrib.net/Une-arb...

    Répondre à ce message

  • 1
    Christophe

    Bonjour,

    Un grand merci ! Je cherchais justement à remplacer mon menu (pris sur spip-eva), doublement utile :
    -  servir de menu de navigation (étonnant, non ?),
    -  servir également de fil d’ariane : en effet, en cliquant sur un article en page d’accueil, l’arborescence se déploie et met en évidence la rubrique courante.

    Malheureusement, il a fallu bidouiller pour le faire fonctionner en spip1.9 (lien vers filtre.php dans inc-layer.php... Merci le forum !), et maintenant, il y a des conflits avec spip1.9.2 et des plugins... À abandonner donc.

    Votre menu tombe donc à point...

    Il fonctionne TB mais j’ai un (petit) souci de puces (oui, qui grattent un peu) :
    -  quand le menu se déploie, un <ul class="show hide"> apparait... Est-ce voulu ? Seules les class « show » et « hide » sont définies dans la feuille de style.
    -  Et (conséquence ?) c’est la puce « plus » au lieu de la « moins » qui s’affiche ?

    C’est également le cas sur le site Donation Lou Salomé (en piochant au hasard un article à partir du plan du site)... Une piste ?

    J’essaie de mon côté... Et reviendrai vous prévenir ici même si je trouve.

    En tout cas, merci encore... Et vivement le plugin !

    PS1 : 1and1 semble en rade ce matin... pour l’exemple, mon site est donc inaccessible :-(

    PS2 : un petit coup de pub à FIREBUG, plugin Firefox INDISPENSABLE pour traquer les petits soucis dans les pages.

    • effectivement, je connais le pb, mais je crois qu’ici ce n’est pas la feuille de style qu’il faut modifier mais le js, en effet l’image est définie dans celui-ci et comme je suis nul en js....

      si tu trouves une solution, fait moi la parvenir que je la rajoute dans la contrib

    Répondre à ce message

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