Une arborescence dynamique et contextuelle

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Voici comment obtenir très simplement dans tout site SPIP un menu arborescent dynamique du plus bel effet. Comble de bonheur, il sait en plus être contextuel pour s’adapter à la page où il est affiché, et il a la bonne idée de se servir des fonctionnalités DHTML déjà présentes dans SPIP.

Voici comment obtenir très simplement dans tout site SPIP un menu arborescent dynamique du plus bel effet.

Comble de bonheur, il sait en plus être contextuel pour s’adapter à la page où il est affiché, et il a la bonne idée de se servir des fonctionnalités DHTML déjà présentes dans SPIP.

Voici donc comme promis depuis plus de six mois une version simplifiée et nettoyée du menu arborescent dynamique que nous (Clever Age) avons réalisée pour la partie du site EDF dédiée aux particuliers.

Voilà un exemple très parlant de ce que l’on peut en faire :

Sur le portail EDF
Le menu arborescent dynamique du site EDF pour les particuliers

Voyez par vous-même : http://particuliers.edf.fr/rubrique...

Et voilà ce que ça donne en installation de base :

Le menu dans les squelettes par défaut
Voilà ce que donne ce menu après simple ajout dans le squelette par défaut des rubriques.

Utilisation

Il suffit de télécharger le fichier ci-dessous, de le dézipper à la racine de votre SPIP en s’assurant au préalable qu’il n’y a pas déjà
un fichier menu.html et/ou un fichier menu.php3.

Le menu arborescent dynamique

Ensuite, ajoutez par exemple dans le rubrique.html, à l’endroit où vous voulez voir le menu :

<INCLURE(menu.php3){id_rubrique}>

Personnalisation

Personnalisation des textes : couleurs, polices, tailles ...

La personnalisation s’effectue via la feuille de style présente dans le squelette menu.html :

<style>
.secteuroff { font-weight: bold; }
.rubriqueoff { font-weight: normal; }
.secteuron, .rubriqueon { font-weight: bold; color: #ff9999; }
.secteur, .rubrique { font-weight: bold; color: #ff3333; }
</style>

Une différentiation est faite entre les secteurs et les rubriques de niveaux inférieurs et entre ces mêmes éléments selon qu’ils font ou non partie de la hiérarchie de l’élément courant :

-  secteuroff pour un secteur différent de celui de l’élément courant
-  secteuron pour le secteur de l’élément courant
-  rubriqueoff pour une rubrique n’appartenant pas à la hiérarchie de l’élément courant
-  rubriqueon pour une rubrique appartenant à la hiérarchie de l’élément courant
-  secteur pour un secteur si c’est l’élément courant
-  rubrique pour la rubrique courante si ce n’est pas un secteur

Cette feuille de style peut éventuellement être retirée de ce squelette et replacée dans la feuille de style générale.

Personnalisation des images

Comme vous pourrez le lire ci-dessous, ce menu exploite des fonctions déjà présentes dans SPIP, mais utilise une copie des images concernées.

Il est donc possible de remplacer les images de pliage et dépliage par d’autres, mais à condition de les remplacer par des images de mêmes noms et de même taille : 16 x 14 pixels.

De même, les puces peuvent aussi être remplacées.

Pourquoi recopier le répertoire img_pack/ ?

Comme vous pourrez le voir dans le zip, il est nécessaire de reprendre dans la racine une partie du répertoire img_pack/ qui se trouve normalement dans ecrire/.

C’est tout simplement que ce menu exploite les fonctionnalités DHTML développées pour l’interface de publication de SPIP (ie ce qui se trouve dans ecrire/inc_layer.php3) plutôt que s’appuyer sur un script DHTML externe à la manière du menu proposé par Kangourou.

Or, les fonctions utilisées génèrent du code HTML faisant référence de manière relative aux images contenues dans img_pack, ce qui oblige à en faire une copie à la racine. Heureusement, cela permet par ailleurs la personnalisation expliquée ci-dessus.

Compatibilité

PlateformeNavigateurFonctionneNe fonctionne pas
Windows Internet Explorer 6.0 .
Windows Netscape 6.1, 7.02 4.51 [1]
Windows Mozilla 1.0, 1.3 .
Windows Phoenix 0.5 .
Windows Opera . 6.05 [1]
Windows Crazy Browser 1.05 .

Notes

[1Toujours déplié

Discussion

95 discussions

  • Stephane

    Etant donné que le fichier inc/layer.php a été modifié dans les versions 2.0 de SPIP, ce joli menu est maintenant inutilisable ...
    C’est typiquement mon cas aujourd’hui lors de mes tests de migration de SPIP 1.9.2 en 2.0.8

    Répondre à ce message

  • J’utilise depuis plusieurs annéers cette contrib pour un site alors merci pour ce louable partage ... mais le code html généré est monstrueux avec des appels à js dans tous les sens alors je migre vers une solution plus légère !

    Voir
    -  http://www.spip-contrib.net/Une-arb...
    -  http://www.spip-contrib.net/Menu-de...

    Ce serait quand même bien d’utiliser jquery pour une fonctionnalité comme ça...

    Répondre à ce message

  • 2

    Bonjour à tous,

    Cela fait une semaine que je cherche moi aussi, en me tapant régulièrement la tête contre les murs, à régler proprement le problème du passage à la 1.9.

    Le truc c’est que, comme tout le monde, j’ai d’abord été obligé de passer la durée du cache à zéro : 0*3600

    Mais cela faisait recalculer chaque page à chaque visite. Et puis j’avais des plantages sur la prévisualisation des pages, quelquefois.

    Finalement, après une longue recherche et un coup de chance MONSTRUEUX, je suis tombé sur la solution, sur un forum perdu au milieu de nulle part qui traitait un problème de cache sous 1.9

    Je ne sais pas pourquoi ni comment cela fonctionne, mais par rapport à ce qui a déjà été dit ici, je rajoute la ligne magique :
    include_spip(’/inc/filtres’) ;

    Ce qui donne au total :

    // inclusion du script de gestion des layers de SPIP
    $flag_ecrire = false ;
    include ’ecrire/inc/layer.php’ ;
    include_spip(’/inc/filtres’) ;

    Là cela fonctionne à tous les niveaux, j’ai enfin pu repasser mon cache à #CACHE3600

    Bingo ! J’espère que cela fonctionnera pour vous aussi

    Fabrice
    (me contacter : http://gely.info/_F-Gely_.html)

    • Suite à un problème de mise en forme dans mon message, je reprends les lignes magiques :

      SPIP $flag_ecrire = false ;

      include ’ecrire/inc/layer.php’ ;

      include_spip(’/inc/filtres’) ;

    • Bonjour à tous,
      Suis passé en 1.9.1, et je n’arrive pas à faire fonctionner normalement ce menu :
      je m’explique :
      Les rubriques sélectionnées ne « s’exposent » pas, et le plus important, contrairement aux sites mis en exemples, le menu ne reste pas déplié sur la rubrique où l’on se trouve.
      Sinon tout est affiché correctement, même si ca ne se déplie que sur le clique de la fleche et non pas de la rubrique.
      En gros le site d’edf cité en exemple (même si il y a une css) ne correspond pas du tout à la source, au niveau des fonctions...
      Quelqu’un aurait une source à jour 1.9.1 en exemple à proposer ?
      Merci

    Répondre à ce message

  • 5

    Bonjour,
    Je suis passé sous 1.9.1 depuis 1.8.2 et j’ai eu de grosses difficultées à faire marcher ce menu.
    J’ai finalement inséré ce code dans menu.html :

    $flag_ecrire = false;
    include 'ecrire/inc/layer.php';
    afficher_script_layer();

    et surtout ne pas oublier de mettre #CACHE{0*3600}

    J’espère que ca en aidera certains

    Arhtur

    • CORRECTION ET PRECISION
       !!! attention à la syntaxe et erreur de frappe (guillemets, espaces, etc.) ou aux copier-coller les gars !

      Après être devenu fou pendant un quart d’heure, Chez moi c’est cela qui marche :

      /////en première ligne de menu.html

      #CACHE0*3600

      ///puis au niveau de :

      // inclusion du script de gestion des layers de SPIP

      $flag_ecrire = false ;

      include_spip(’ecrire/inc/layer’) ;

      include_spip(’ecrire/inc/minipres’) ;

      afficher_script_layer() ;

    • Ben, c’est encore pareil que dans tous les messages ci-dessus (en tout cas je ne vois vraiment aucune différence), donc ça marche toujours pas :)

      Warning : Division by zero in /mnt/112/sdc/7/d/aae.infos/galerie/ecrire/public.php(24) : eval()’d code on line 26

      Warning : Division by zero in /mnt/112/sdc/7/d/aae.infos/galerie/ecrire/public.php(24) : eval()’d code on line 26

      et ça fait ça pour chaque ligne du menu dynamique. Sachant qu’il n’y a aucune raison pour qu’il y ait une histoire de division par zéro, je me demande si ça vient pas de chez Free...

      Bref, dommage que ça ne marche pas sous la 1.9 :(

    • Ah oui et j’ai oublié (peut-être que ça donnera des idées à quelqu’un) -> la dernière erreur est :

      Fatal error : Call to undefined function : afficher_script_layer() in /mnt/112/sdc/7/d/aae.infos/galerie/ecrire/public.php(24) : eval()’d code on line 30

      Donc en fait après avoir 15 fois le message d’erreur de la division par 0 ça se termine par celui là.

    • Bonjour, pour passer de spip 1.7.2 en 1.9.0 , j’ai modifié le fichier menu.html de la manière suivante :

      #CACHE {0*3600}
      
      <?php
      
      // inclusion du script de gestion des layers pour SPIP 1.9
      
      $flag_ecrire = false;
      
      include 'ecrire/inc/layer.php';
      
      include 'ecrire/inc/minipres.php' ;
      
      afficher_script_layer();
      ?>
      
      [(#REM) remplacement  du chemin 'img_pack' par 'ecrire/img_pack' ]
      
      echo '<img src="ecrire/img_pack/puce'.(#ID_RUBRIQUE == $actuelle ? 'on' : 'off').'.gif" />';

      Et cela fonctionne enfin !

      Bonne chance...

    • Bonjour,

      Je n’arrive pas à bien executé le sript, j’ai recopier le ficier menu.html, sous spip 1.9.1, mais il me met des erreurs juste avant :
      Parse error : parse error in c :\program files\easyphp1-8\www\outil_catalogue\squelettes\menu.html on line 34.
      les balise php sont visiblement mal placé, et je ne sais pas ou les mettre, quelqu’un pourrait il donner le code de menu.html pour spip 1.9.1.

      PS : je doit créer un menu contextuel utilisant des tables externes à spip. Je doit avoir 4 onglets dans mon menu du même type que celui qui est présenté, et chaque onglet doit se mettre à jour en fonction du choix sur un onglet et ainsi de suite. Suivant que les choix faits, corresponde à un résultat dans la base de données.

      avez vous une idée ?

      D’autre part, j’ai remarqué qu’il était difficile de faire des requêtes évolués avec spip, et je pense me rabattre vers le SQL classique, qu’en penser vous ?, peut être y a t il un forum ouvert à ce sujet ?
      (je n’est pas pu récupérer des enregistrements (DISTINCT) dans une table doublons ne marche pas.

    Répondre à ce message

  • 3

    même erreur que tout le monde sur la 1.9 :(....
    pourquoi chez certain ca fonctionne ? POuvez vous recopier le code ici ?

    • Je viens de le corriger il y a 5 minutes et ca fonctionne et sous Firefox et sous IE6

      // inclusion du script de gestion des layers de SPIP
      $flag_ecrire = false ;
      include_spip(’ecrire/inc/layer’) ;
      include_spip(’ecrire/inc/minipres’) ;
      afficher_script_layer() ;
       ?>

    • Oui, ca fait 3 fois que ces lignes sont copiées-collées dans les derniers messages... mais ca n’explique toujours pas pourquoi cette modif marche chez certains et pas chez d’autres !

    • spip 1.9.1 pareil, marche pas...
      Le code du menu.html m’inquiète un peu... il semble qu’il manque au moins une déclaration <?php

      ...
      Merci quand même.

    Répondre à ce message

  • 6

    Salut,

    J’ai quelque mal à remettre cette contrib au goût du jour de spip 1.9 Quelqu’un a-t-il réussi la mise à jour ? Un coup de pouce serait vraiment appréciable.

    J’ai remplacé l’appel :

    include ’ecrire/inc_layer.php3’ ;

    par

    include ’ecrire/inc/layer.php’ ;

    Mais ça ne suffit pas. Le calcul des page s’arrête net quand on tente d’inclure le menu.

    Merci d’avance de vos aide et lumières !

    gandalf

    • Il faut désormais mettre dans la 1.9 :

      include_spip(’ecrire/inc/layer’) ;

      include_spip(’ecrire/inc/minipres’) ;

      Chez moi et quelques autres, ça fonctionne...

    • Ça marche ! Merci beaucoup.

      gandalf

    • dans quel fichier exactement : menu.html ?

      à ce niveau ?

      // inclusion du script de gestion des layers de SPIP
      $flag_ecrire = false ;
      include_spip(’ecrire/inc/layer’) ;
      include_spip(’ecrire/inc/minipres’) ;

      afficher_script_layer() ;
       ?>

      petit soucis chez moi, j’ai le message d’erreur suivant :

      Warning : Division by zero in /var/alternc/html/c/couac/ecrire/public.php(24) : eval()’d code on line 31

    • J’ai exactement la même erreur au numéro de ligne près. (code on line 22 ou 23 ou 24)

      Personne n’aurait une idée pour rendre cette contrib opérationnelle proprement avec la 1.9 ?

    • Bon, j’ai essayé plusieurs petites bidouilles et rien n’y fait !

      Je ne comprends pas pourquoi la modification indiquée ci-dessus passe chez certains et pas chez d’autres... ça me paraît un peu bizarre pour du code « propre » ?

      Help please !

    • J’ai parlé trop vite. Ca marche sur firefox mais l’affichage est carrément cassé sur IE6.

      Ce serait vraiment utile d’avoir une mise à jour « officielle » de cette contrib. :-)

      a+

    Répondre à ce message

  • 1

    Bon beh je crois que le titre est explicite, je trouve le menu efficace, mais il le serait encore plus si je pouvais l’adapter à l’horizontale, mais je galère pour le modifier les sources...si quelqu’un à des idées ou a déjà réussi à le faire, dite le moi !
    merci.

    • voici un site proposant beaucoup d’exemples de menus fait à partir de listes.

    Répondre à ce message

  • 1
    jl grellier

    bonjour,

    J’essais depuis quelques jours de transformer ce menu (génial en l’état) en un menu horizontal (je me doute que c’est faisable voir peut-être facile...mais po moyen !!!)

    Ce que je voudrais c’est :

    sur ma page d’accueil avoir le menu suivant :

    secteur1 - secteur2 - secteur 3

    ensuite qd je clique sur secteur2 je veux avoir le menu suivant sur ma nouvelle page :

    secteur1 - secteur2(autre couleur par css) - secteur 3
    rub1secteur2 - rub2secteur2 - rub3secteur2

    puis qd je clique sur rub3secteur2 je veux avoir le menu suivant sur ma nouvelle page :

    secteur1 - secteur2(autre couleur par css) - secteur 3
    rub1secteur2 - rub2secteur2 - rub3secteur2(autre couleur par css)
    srub1rub3secteur2 - srub2rub3secteur2 -

    et qd je clique sur l’une de ces sous-rubriques cela m’affiche une page dans laquelle cette sous-rubrique est d’une couleur différente...

    Voilà en ce qui me concerne, je m’arrête ici mais il faudrait que cela soit infini (ou presque)...

    Merci si quelqu’un peut m’aider...

    • Oui moi aussi je suis interessé par cette idée, mais je n’ai toujours pas trouvé la solution.
      Si quelqu’un aurait des idées ?
      Merci.

    Répondre à ce message

  • 1

    Personne n’a une version de cette contrib avec l’affichage des articles formatés comme les rubriques ?

    Enfin en un deuxième temps voudrais que la base du menu ne soit pas la racine du site (que je dédie aux langues), ni du premier nivau de sous-rubriques mais dès le deuxième :

    Niveau racine ->langues
    Niveau 1—>choix des themes (sous-rub de 1er niveau)
    Niveau 2--->sous-rubriques (2e niveau et suivants) et articles des themes dans le menu

    Je peux faire ca en créant un squelette par sous-rubrique de 1er niveau/theme (embêtant mais ca fonctionne déjà, par ex. rubrique-3.html) mais après comment depuis un article appeler le menu correctement pour qu’il s’affiche comme dans la sous-rubrique qui le contient ?

    Répondre à ce message

  • Quand j’utilise cette contrib’, mes articles ne s’affichent pas, et les sous-rubriques s’affichent comme des articles...
    Quelqu’un sait pourquoi, et commment afficher l’intégralité de mon site dans ce menu ?

    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