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

  • 2
    francky

    Bonjour à tous
    j’ai un petit soucis avec ce menu qui est super d’ailleurs
    voila
    la premiere fleche et la premiere de la premiere fleche ne fonctionne pas

    en effet l’action se deroule, la fleche bouge mais les rubriques en dessous n’apparaissent pas
    il faut que je clique sur le texte pour voir les rubriques apparaitrent en dessous et la premiere rubrique c’est pareil
    mais la rubrique en dessous ca marche

    j’ai fait le test en rajoutant une rubrique avec articles pour voir si ca venait de ma rubrique mais idem la premiere ne marche pas mais l’autre qui n’est plus en 1re position refonctionne

    quelqu’un a une idée

    • francky

      pour infos c’est une erreur javascrip qui m’empeche de faire cette action

      ligne : 17
      car : 3
      erreur : ’layer.style’ a la valeur Null ou n’est pas un objet
      code : 0
      url : http://xxxx

      xxxx c’est mon site qui est en local

    Répondre à ce message

  • 3

    personnellement j’utiliserai des ul et des li plutot que des tables pour mettre en forme le menu pour gagner en accessibilité et en sémantique, il faut juste spécifie le li list-type=none dans le css ( netscape 4 met un ? à la place de la puce mais au chiotte netscape 4).
    A noter également que le menu ne déroule pas sous opera6
    Sinon beaux boulot

    • Nicolas Hoizey

      L’accessibilité était à l’époque une notion bien moins hype que maintenant, donc on avait fait au plus rapide.

      Mais c’est vrai qu’il serait possible de faire beaucoup mieux avec des listes !!!

      Si quelqu’un a le courage d’essayer ... ;-)

    • bah en fait je l’ai fait moi même du moins c’est en cours et reussi dans une version non spip restera plus qu’a le spiper après

    • Bonjour,

      J’ai lu un des pessages que vous avez laissé en mars 2004 sur http://www.spip-contrib.net/article.php3?id_article=103 .

      Peut-être pourrez-vous m’aider :
      J’aimerais savoir comment faire pour que une branche de menu ayant été « étendue » le reste même après le refresh de la page ou un click sur une des sous pages de cette section « ouverte ».

      J’ai implémenté l’arborescence dynamique et contextuelle trouvée ici :
      http://www.spip-contrib.net/article103.html?var_recherche=menu
      mais le problème persiste.

      Merci pour votre aide.

      Gianni

    Répondre à ce message

  • Salut, tout d’abord félicitation pour ce menu, j’orais juste une question :
    Comment déplier d’emblée une des branche du menu ? C’est à dire que comme sur edf, je voudrais que les sous-rubriques d’une rubrique s’affichent sans que l’internaute ait cliqué pour les afficher.

    En gros, pour bien me faire comprendre, quend on va sur edf particuliers, on a directement accès à ventilation ou isolation, sans qu’on ait cliqué sur « fiches pratiques/vos appareils/chauffage/ »

    Voilà, j’ai vu la question posée sur un autre sujet, je suis donc pas seule à m’y intéréssé, et une réponse serait la bienvenue :)

    Merci à celui qui me la donnera !

    Répondre à ce message

  • salut,

    j’ai un pb parce que le « INCLUDE » fonctionne bien dans une page rubrique mais pas dans la page sommaire dans laquelle le mnu ne s’affiche pas...

    est-ce que j’aurais loupé quelquechose ?

    merci d’avance si qqu’un à un idée ladessus...

    ricco

    Répondre à ce message

  • 1

    Bonjour,
    Je viens d’installer le menu dynamique et ça marche parfaitement, si ce n’est un petit détail. Je n’arrive pas à faire ouvrir la rubrique dans le frame d’à coté. A chaque fois que je clique sur une rubrique, ça l’ouvre à l’endroit ou se trouvait le menu. Je n’arrive pas à trouver dans le code le lien à modifier.
    D’autres part, est il possible de modifier les liens afin d’afficher une page faite à la main plutôt que les pages préconstruites ?
    Merci d’avance et désolé de poser des questions aussi simples mais je débute...

    • Dans ta page menu.html cherche les lignes ou tu as < a ref= blabla... > et à la fin juste avant le « > » tu mets target=nom_de_ton_cadre et voilà ton lien s’ouvrira là où tu le souhaites...

    Répondre à ce message

  • 1

    Maintenant qu’avec le multilinguisme les langues sont dans des secteurs, comment faire pour l’adapter à ceci ?

    Il faudrait trouver un moyen pour qu’il n’affiche pas la première rubrique de la racine généralement appelée « fr », « en »... et directement afficher les sous-rubriques et faire la même chose avec les autres langues, tout ceci sans que pour chaque nouvelle langue nous devions entrer dans le script et indiquer une rubrique particulière...

    • je me pose la même question... il suffirait de changer l’id_parent a la ligne 37 avec le n° du secteur... mais il faut autant de menus que de langues... est-ce possible avec un seul menu ?

      merci

    Répondre à ce message

  • 2
    stéphane

    Comment faire pour que ce (superbe) menu soit déplié d’emblée (sur la page sommaire) ?

    merci

    • tjrs pas de réponces ? moi aussi je suis trés intereser par la solution.. ;)
      merci..

    • François Schreuer m’avait écrit dans le forum : « Les deux fonctions sont bouton_block_visible et bouton_block_invisible, il faut ajouter une structure conditionnelle qui, si id_rubrique est le bon et si la condition requise est ok, charge bouton_block_visible au lieu de bouton_block_invisible. »

      j’ai pas testé ça, c’était trop difficile pour moi...

    Répondre à ce message

  • 3

    Bonjour,

    J’utilise cette arborescence depuis quelques mois et cela fonctionne très bien.
    Je suis maintenant passé à la version 1.7 de SPIP, notamment pour son support du multiliguisme, et je cherche comment prendre en compte la langue pour n’afficher l’arborescence que dans la langue active.

    Merci d’avance pour votre aide.

    • Nicolas Baroiller

      Je rencontre également le même problème, et je ne dispose pas des connaissances suffisantes en la matière pour le résoudre. J’essaye tant bien que mal d’en comprendre le fonctionnement, mais j’ai plutôt l’impression de me perdre dans des chemins inutiles...

      Si quelqu’un a la solution, n’hésitez pas à nous en faire part... Vous serez bien charitables...

    • Nicolas Hoizey

      Avec une langue par secteur, comme sur mon phpHeaven, c’est simple, il suffit de limiter le menu au secteur courant.

      Avec des langues mélangées dans les contenus, c’est sans doute un peu plus complexe, je n’ai pas encore essayé.

    • Jean-Christophe

      un grand bravo !
      mais « c’est simple » pour toi ! ;) bon, j’ai quand même pris mon courage à 2 mains et je me suis dit que j’allais étudier comment est fait ton phpheaven... c’est exactement ça que je cherche à faire depuis 2 semaines ! et là je ne comprends rien ! les urls ont été réécrites ? comment fait-on pour acceder aux squelettes ?

    Répondre à ce message

  • Un site sans arborescence textuelle (ca devient vite complexe) et un autre avec (cool). Y a pas photo. Un grand bravo pour la contrib !

    Répondre à ce message

  • Félicitations pour ce menu contextuel et hiérarchique. Je l’ai utilisé et un peu customisé pour mon site, cela rend bien.

    J’ai tout de même deux petites questions :

    1. Je voudrais afficher les articles de la rubrique en cours sur la même page, je sais qu’il y a déjà une explication à ce sujet mais je ne sais pas où mettre les boucles articles, je ne me repère pas bien dans le php et tout le reste du ficher menu.html. Quelqu’un pourrait-il me renseigner ?

    2. Quand on clique sur les rubriques, il nous renvoie sur les pages de type rubrique.html, pourquoi pas, mais dans mon cas, j’ai opté pour une réorganisation totale du squelette du site. J’aimerais que lorsqu’on clique sur une rubrique il envoie sur la page qui correspond à cette rubrique. Je suppose que c’est possible mais je ne sais pas quel paramètre modifer...

    Merci à Nicolas pour ce menu,

    et merci d’avance à ceux qui prendront la peine de me répondre ;))

    Aurore

    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