Menu dépliant arborescent PureDOMExplorer

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

22 discussions

  • Merci pour cet article, j’ai utilisé votre contribution en remplaçant le js par du css3. J’obtiens un menu déroulant qui fonctionne sous firefox épiphanie chromium et opéra (pour ie je ne sais pas je n’ai plus rien pour le tester et ça m’importe peu...).
    Le résultat est visible sur mon bac à sable http://www.mbigan.tk

    Salutations.

    Répondre à ce message

  • 1

    Bonjour,

    Je ne comprend pas : la plupart des contributeur sont géniaux mais ils ne répondent pas aux utilisateurs.

    Rpapa, je me lancerai bien dans l’utilisation de ta contribution mais à quoi bon si c’est pour galérer comme les autres !

    C’est quoi qui vous permet de passer des heures à programmer et 0 minutes pour communiquer ?

    D

    • faisons une liste
      -  je ne suis pas génial
      -  tu es un grand déçu
      -  tu hésites à démarrer
      -  je ne programme pas des heures
      -  aujourd’hui je communique
      -  tu n’as pas posé de questions
      -  je n’ai pas utilisé cette contrib depuis plusieurs années mais elle tourne toujours sur le site de http://www.donationlousalome.org/
      -  je ne sais pas quoi dire d’autres !!!

      Bises !!!!

    Répondre à ce message

  • Bonjour,

    Cela fonctionne mais je ne vois pas comment mettre en gras la rubrique courante ?

    Merci

    Le site ici :
    http://www.dinansportcanin.fr

    Répondre à ce message

  • bonjour j’aurais vraiment besoin d’aide car rien ne fonctionne comme indiqué sniff
    je suis sous spip 2.0.3 et je voudrais utiliser ce menu déroulant mais ca ne marche pas pourtant :

    1-/ j’ai installé les fichiers (menu-pde.html/pde.css/pde.js) dans le rep squelettes
    2-/ j’ai ajouté à mon squelette article le code suivant afin d’appeler la page css et le script gérant le menu

    <script type="text/javascript" src="spip.php?page=pde.js">
        </script>

    3-/j’ai ensuite ajouté le code ci-dessous pour appeler le fichier menu-pde.html qui contient la boucle d’affichange des rubriques et articles etc.

    -  BOUCLE_art-menu(ARTICLES)id_article>
    -  INCLURE fond=menu-pdeid_rubrique=0>
    -  /BOUCLE_art-menu>

    j’ai enlevé le « < » avant Boucle etc. sinon ca n’apparait pas ds mon message même en le mettant en citation mais ils y sont ds mon squelette evidemment

    Or si le menu apparait malheureusement il ne se déroule pas ?
    Est ce que quelqu’un a une idée car je ne sais pas ce qui cloche.
    Merci de votre aide

    site http://cedalex.phpnet.org/paris1

    Répondre à ce message

  • Même problème que précédemment, je n’arrive pas à déplier la rubrique courante.

    Répondre à ce message

  • 3

    Bonjour.
    J’ai essayé d’insérer ce menu qui convient parfaitement au résultat que je souhaite obtenir, mais je rencontre un petit problème.

    Je travaille avec SPIP 1.9.2a.

    J’ai copié les trois fichiers et les deux images dans mon répertoire squelettes.

    Dans mon squelette « sommaire.html » :

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Site officiel du loup et des grands pr&eacute;dateurs en France</title>
    <style type="text/css">	@import '#CHEMIN{pde.css}';	
        </style>
    <script type="text/javascript" src="spip.php?page=pde.js">
        </script>
    <link rel="stylesheet" href="styles_loup.css" />
    </head>

    Puis, dans la partie html :

    <span id="navig">
    <INCLURE {fond=menu-pde}{id_rubrique=0}>
    </span>

    Je met exactement la même chose dans mon squelette « rubrique.html » (et c’est peut être ici que je fais une erreur).

    Lorsque je suis sur ma page de sommaire, je déplie et replie le menu sans problèmes. Par contre, si je clique sur une rubrique quelconque, la page de rubrique s’affiche correctement, mais mon menu est complètement replié. Le problème est le même que je sois sous Firefox 2 ou IE6.

    Quelqu’un peut il me dire où je fais une erreur ?

    • Re-bonjour

      Bon, j’ai un petit peu avancé. Dans mon squelette "rubrique.html, il faut bien que je mette id_rubrique et non pas id_rubrique=0 dans la balise INCLURE.

      Par contre, c’est la balise #EXPOSE qui ne semble pas interprétée correctement. Lorsque j’affiche la code source de la page, ma première balise de liste se présente ainsi :
      <ul class="on">

      Alors que pour les sous rubriques, je retrouve bien la classe « show ».

      Une idée ? Merci d’avance.

    • même pb une piste trouvé ??

    • Par hasard, y aurait-il eu une réponse à cette question ?

      Merci,
      Kim

    Répondre à ce message

  • Bonjour et merci beaucoup pour cette contribution,

    j’ai un petit soucis et espere que quelqu’un aura une solution...

    dans ce menu je voudrais que les rubriques contenant un article affiche directement cet article donc j’ai rajoute les boucles :
    BOUCLE_articles_plusdun(ARTICLES)id_rubriquedoublons1,1
    BOUCLE_articles_unseul(ARTICLES)id_rubriquedoublons0,1

    mais le menu ne reste plus deplier quand on entre dans une section
    le code source

    merci pour le coup de main...

    Répondre à ce message

  • 4

    Bonjour

    Il existe une version plus recente 3.1 du pde.js (version utilisee 3.0) qui permet d’afficher la rubrique courante comme une autre avec la fleche de depliage :

    http://onlinetools.org/tools/dom-tree-menu-puredom/

    Répondre à ce message

  • 3

    OK super, ça s’installe facile et ça marche.
    C’est une bonne base mais j’ai l’impression que ça n’exploite pas toutes les possibilités du script original ?

    Et en particulier, rien ne distingue la rubrique courante... dommage !

    • Pour distinguer la rubrique courante et sa hierarchie, il suffit d’ajouter par exemple strong sur ces rubriques ce qui donne pour le contenu de la boucle indiquée :

        <li>
        <a href="#URL_RUBRIQUE" title="[(#TITRE|couper{80})]" >
      	[(#EXPOSE{<strong>,''})] 
      	[(#TITRE|couper{80})]</a>
      	[(#EXPOSE{</strong>,''})] 
      		<B_smenu2><ul [class="(#EXPOSE{show,hide})"]>
      			<BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre, titre}>
            <li><a href="#URL_RUBRIQUE"title="[(#TITRE|couper{80})]" >
      			[(#EXPOSE{<strong>,''})] 
      			[(#TITRE|couper{80})]</a>
      			[(#EXPOSE{</strong>,''})] 
      					<BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu>
      			</li>
            </BOUCLE_smenu2>
      		</ul>
          </B_smenu2>

      l’intérêt de mettre <strong> plutôt que <b> par exemple est que le script initial reconnait spécifiquement le strong et fait en sorte que cette branche est toujours dépliée.

    • bonjour,
      j’ai bien essayé la méthode proposée par Jluc pour mettre en évidence la rubrique en cours, mais à ce moment là j’ai la puce qui disparaît....Si quelqu’un a une petite idée...voici mon code

      <BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{lang}{doublons}>
      	    <li>  <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
                  [(#EXPOSE{<strong>,''})] 
      			[(#TITRE|supprimer_numero)]</a>
      			[(#EXPOSE{</strong>,''})] 
                <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)]" >
                  [(#EXPOSE{<strong>,''})] 
      			[(#TITRE|supprimer_numero)]</a>
      			[(#EXPOSE{</strong>,''})] 		 
      					 <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{30})]</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{30})]</a>
      				 
      				 </li>
                 </BOUCLE_art2>
                 </ul>
                  </B_art2>
                <//B_sous-menu>
            </li>
       	   </BOUCLE_menu-racine>
    • je n’ai pas ce pb

           <ul [class=" [(#EXPOSE{<strong>,''})]"]>

      www.bachant.info

    Répondre à ce message

  • 5

    Salut,
    J’ai intégrer votre menu çà marche super, mais par contre j’ai un problème, je voudrais que ce menu reste ouvert dans la rubrique courante lorsque je clique sur une rubrique.Actuellement, à chaque fois que je clique il se referme. Et je n’ai pas envie d’utiliser des frames ^^

    C’est possible de faire ça ?

    Merci.

    • normalement, il fonctionne comme cela,

      n’as-tu pas oublié de passer l’id_rubrique dans l’inclure

      mets un lien pour voir

    • En fait c’est bon, c’était une erreur de ma part.
      Merci et bravo pour l’info et l’tuto

    • natacham

      J’ai installer le menu dépliant arborescent PureDOMExplorer et je ne veux faire apparaitre que la rubrique courante et ses sous rubriques dans le menu depliant.
      donc pas les autres rubriques principales et pas les articles.

      Novice en la matière je ne sais comment faire.
      Quelqu’un peut il m’aider ? merci

    • natacham

      en remplaçant racine par id_rubrique pour
      > BOUCLE_menu-racine

      Merci cela fonctionne.

      Mais... et oui encore un problème, avec cette manip, lorsque j’avance dans la hiérarchie et que je clique sur une sous rubrique je n’ai du coup plus d’affichage de ma rubrique supérieure et plus des autres sous rubriques non plus.

      Comment faire ?

    • On peut avoir des précisions j’ai le même pb...

      merci

      www.bachant.info

    Répondre à ce message

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

    • 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

  • 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

  • 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

    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 !

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

    • 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

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

    • 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

    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+

    • 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

    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 ?

    • 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

  • 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

  • 4

    petit retour ...

    plugins desactivé + SPIP 1.9.2a [8878]

    Modifier vos squelettes afin d’inclure le menu

    * dans rubrique.html et sommaire.html

    hors point de menu : menu_pde} mais un : menu-pde
    j’ai donc modifier l’inclure par menu-pde

    le menu s’affiche donc mais une erreur aussi :
    # Erreur(s) dans le squelette

    * ()
    Erreur MySQL
    id_rubrique FROM spip_rubriques WHERE id_rubrique=
    You have an error in your SQL syntax ; check the manual that corresponds to your MySQL server version for the right syntax to use near ’’ at line 3
    AIDE,

    pouvez vous m’aider.....

    • hors point de menu : menu_pde mais un : menu-pde j’ai donc modifier l’inclure par menu-pde

      merci, je vais modifier

      il faut appeler le menu avec un numéro de rubrique, or la page sommaire ne génère pas de numéro de rubrique, il faut alors écrire

    • Bon coté CSS pour personnalisé ; tu a une explications de la feuille parce que j’arrive a rien . je souhaite modifié la taille d’écriture du menu.

      Ah oui en plus j’ai oublié Super ce menu ça me rappel celui de blOog en plus simple a mettre en place...

    • prenons le cas du menu avec articles (le deuxième zip)

      ouvrons la feuille de style pde.css
      au début tu trouves
      ======== extrait============

      	
      	ul.pde a:link,
      	ul.pde a:visited,
      	ul.pde a:hover,
      	ul.pde a:active{
      		text-decoration:none;
      		color:#111;
      	}
      	ul.pde,ul.pde li{
      		margin:0;
      		padding:0;
      		list-style:none;
      	}
      	ul.pde{
      		text-align:left;
      		font-size:1.1em;
      		margin:.8em auto;
      		background:transparent;
        border-style: dotted; border-width: thin;
      		width:100%;
      	}
      .......

      tu peux changer la taille (paramètre font-size:1.1em; ) et la couleur du fond (background:transparent; )en modifiant le code de

      	ul.pde{
      		text-align:left;
      		font-size:1.1em;
      		margin:.8em auto;
      		background:transparent;
        border-style: dotted; border-width: thin;
      		width:100%;
      	}

      pour la taille et la couleur de la liste des articles, plus bas dans la feuille de style, tu trouves :

      ul.pde li.art a{
        color:yellow;
        font-size:0.8em;
      }
      
      il suffit la encore, de modifier les deux paramètres.
      
      A+
    • Merci pour tous cela est donc fonctionnel est a ma convenance

      donc si vous vouler voir un exemple Ville de BACHANT

      Superbe boulot

    Répondre à ce message

  • 4

    petit retour ...

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

    la j’avoue je comprend pas tous...

    pour a feuille de style du menu ; il suffit de mettre dans le fichier inc-head

    [(#REM) Balise permettant aux plugins d'inserer des appels javascript ou css ]
    #INSERT_HEAD
    
    [(#REM) plugins munu rubriques]
    <style type="text/css">	@import '#CHEMIN{pde.css}';	</style>
    <script type="text/javascript" src="spip.php?page=pde.js"></script>

    comme précité ; mais pour a feuille de style du javascript ; tu parle de quoi ....?

    • Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :
      la j’avoue je comprend pas tous...

      je voulais dire entre les balises

      et

      de chaque squelette appelant le menu.....

    • ne pas tenir compte de cette réponse, lire l’autre

    • Ajouter dans l’entête l’appel de la feuille de style du menu et du javascript en ajoutant les lignes :
      la j’avoue je comprend pas tous...

      je voulais dire entre les balises <head> et </head> de chaque squelette appelant le menu...

    • je voulais dire entre les balises

      et

      de chaque squelette appelant le menu...

      donc on peu simplifier en s’appuyant sur le fichier « inc-head ».

      en faisant :

      [(#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>

    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