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

  • 1

    Je l’ais instalé sans probleme sur mon site.....
    par curiosité je suis allé le faire valider W3c

    et je me suis fais jeter.

    il y aurait deux-trois modiffs a faire (en particulier poru le css)
    et il serait valider ;)

    ce qui n’enleve bien evidement rien au travail accomplis :)

    • Nicolas Hoizey

      Une version plus respectueuse des standards, et surtout sans tableaux, a été réalisée il y a déjà quelque temps, mais je ne la retrouve pas...

    Répondre à ce message

  • 1

    bonjour

    J’utilise depuis qq temps ta contrib, c’est vraiment top.

    Une question se pose maintenant pour moi, néophyte, je voudrais la faire fonctionner dans un site multilingue en ne faisant apparaitre que l’arborescence du secteur où je suis.
    Francais secteur 1
    Anglais secteur 2
    Espagnol secteur 3

    Je ne sais ou intervenir dans ta contrib ? Dans le fichier « menu.html » ?

    Amicalement Joss

    • En général, il suffit de rajouter une boucle secteurs englobant tout le menu...

    Répondre à ce message

  • 2
    Xavier langlois analyste programmeur à Caen.

    Vous trouverez ici une bonne manière de gérer une arborescence dynamique au moyen d’un menu contextuel (nombre de niveaux illimités) :
    http://xl714.free.fr/tree-menu-dynamique/
    Faites moi un signe sur mon site si la source vous intéresse.

    • Le problème est que cela oblige à avoir Javascript actif alors que mon script fonctionne même sans Javascript ...

    • Tout à fait et il est plus rapide aussi. Mais cela pourra donner des idées en plus. :)

    Répondre à ce message

  • 1

    Bonjour,

    Ca fait un an et demi que je vois cette contrib, mais l’aperçu du menu EDF m’a toujours dissuadé de l’essayer. Je pense qu’une image plus grosse de l’installation de base rendrait bien compte que ce n’est pas la seule possibilité et que la contrib utilise des fonctions de base de SPIP, la rendant plus économe en ressources.

    • Ca fait un an et demi que je vois cette contrib, mais l’aperçu du menu EDF m’a toujours dissuadé de l’essayer.

      J’avoue ne pas comprendre ... ;)

      Je pense qu’une image plus grosse de l’installation de base rendrait bien compte que ce n’est pas la seule possibilité et que la contrib utilise des fonctions de base de SPIP, la rendant plus économe en ressources.

      Mettre une vignette plus grosse, c’est ça ??? Bin voilà qui est fait, en tout cas partiellement, puisqu’il semble qu’on ne puisse plus mettre soit même une vignette ...

    Répondre à ce message

  • José SISA

    Bonjour,
    j’utilise des boutons qui font
    11 par 11 pixels (je les ai copié dans
    img_pack) et nommé pour qu’ils soient
    utilisés. MAIS, le pb est qu’il sont
    redimensionné dans la page (semble t il
    dans inc_layer.php3 ...

    Comment faire pour qu’ils restent à leur
    taille d’origine (11 par 11 pixels) ?

    Merci !
    José

    Répondre à ce message

  • Je travail sur un site multilingue

    J’utilise ta contrib que je trouve génial !

    le problème est que je souhaiterais ne voir apparaitre que le menu dans la bonne langue pour le visiteur, ce qui suit explique l’ensemble de ce que je souhaite obtenir comme resultat.


    Je monte un site multilingue, avec la particularité de changer de squelette en fonction de la rubrique(avec un appel à une image différente pour chaque rubrique - 3 images dans le cas qui suit), (voir des sous rubriques et des article inclus)
    -  Pour les langues j’ai créé un goupe de mots clefs « lang » :
    - fra
    - ang
    - deu
    mot clef que j’ai appliqué aux rubriques et articles correspondant.
    -  Pour les rubriques, comme elles doivent utiliser des squelettes différents, j’ai aussi créé un groupe de mots clefs « rubart » :
    - rub1
    - rub2
    - rub3
    mot clef que j’ai aussi appliqué les rubriques et articles correspondant.

    De plus, quand le visiteur (par exemple anglais) arrive, je souhaite qu’il arrive non seulement sur la bonne page (ça c’est fait - Grand merci à : Laurent Laville pour sa contrib « Une page d’accueil dans la bonne langue pour chaque visiteur »),
    mais qu’il ne voit que la partie anglaise du site et enfin pour « boucler la boucle », l’accès au plan du site ne devant lui donner que le plan de la partie « anglaise » bien sur.

    Le top du top pour finir, je soumets cela à votre sagacité mais je vais aussi prendre contact avec l’auteur de cette contrib : « un menu contextuel et dynamique ».
    je ne voudrai afficher que le menu dans la bonne langue ... OOOops. Je sais il est pas toujours bien le garçon.

    j’ai bien reçu une reponse de Olivier Gendrin :

    Regarde du côté des mots-clés, ou encore de la balise #LANG pour essayer
    de ne faire que 5 CSS différentes, en insérant soit un mot clé, soit
    #LANG au bon endroit dans le link de la CSS.

    Mais là j’avoue que mon petit neurone s’est liquéfié vers les 3 heures du mat cette nuit et son état n’est pas au mieux à l’heure qu’il est.

    Si des « costauds » de la boucle peuvent me guider ...

    Arborescence de mon travail

    -  FR (rubrique secteur)
    Rub 1
    Rub 2
    Rub 3
    -  EN (rubrique secteur)
    Rub 1
    Rub 2
    Rub 3
    -  DE (rubrique secteur)
    Rub 1
    Rub 2
    Rub 3

    J’ai appelé le squelette des mes rubriques et articles différents
    rubriquetic.html
    rubriquetac.html
    rubriquetoc.html
    et
    articletic.html
    articletac.html
    articletoc.html
    Parce qu’en les nommant du num de la rubrique cela ne peut fonctionner bien sur

    En regardant dans la liste, j’ai trouvé une reponse de Paolo, dans un mail « Re:Multilinguisme » :

    ... J’explique comment je fais ici :
    http://mag.spip.net/ecrire/articles.php3?id_article=28

    mais je n’ai pas accès à cette article ... sur le spip mag la page est blanche ...

    Promis !!! Dès que tout cela fonctionne, je fais un article pour regrouper toutes ces infos et les mettre en ligne

    As tu déjà fait cela ? Où doivent se porter les modifs pour obtenir ce que je souhaite ?


    Nota :

    Dans l’utilisation d’un site monolingue, j’ai constaté un nom dépliment des menus lorsque des articles sont en cours de rédaction, est ce normal ?

    Amicalement

    Eric

    Répondre à ce message

  • 1

    bonjour a tous.
    J’ai un probleme avec ce menu, les images deplierbas , deplierhaut , puceoff et puceon ne s’affichent pas sur mon site. Pourtant quand je clique dessus leur fonction marche (pour les deplierbas et haut). Je les ai bien chargées sur mon ftp dans le dossier ecrire/img_pack. Je comprends pas pourquoi ça me fait ça.
    Sinon merci pour ce menu c’est exactement ce que je cherchais.

    • il est écrit :

      contenues dans img_pack, ce qui oblige à en faire une copie à la racine.

      donc img_pack dans la racine et pas ecrire/...
      tout simplement !

    Répondre à ce message

  • 1

    Bonjour,

    Je viens d’installer les fichiers menu.html, menu.php3 et le dossier img-pack à la racine de mon site et j’ai fait le lien dans le fichier rubrique.html

    Pourtant, la page reste comme auparavant. Aucun affichage du menu et aucun message d’erreur.
    D’où peut venir ce pb ?

    Help !!

    Répondre à ce message

  • salut ! Merci pour ce menu !
    Cependant j’ai une question. Comment faire pour changer la couleur de texte du menu ? Je ne comprends pas l’explication parce que dans mon fichier menu.html je n’ai pas le paragraphe Et donc je ne peux pas changer les couleurs. Je précise que le rose et le rouge ne vont vraiment pas avec les couleurs de mon site ! lol
    merci d’avance !

    Répondre à ce message

  • 6

    Malgré les différentes indications données pour afficher les articles dans le menu, je n’y arrives pas.
    Quelqu’un pourrait il avoir la gentillesse de mettre clairement le code à insérer dans le fichier menu.html, et où l’insérer.

    Pour l’instant, les indications données ne marchent pas chez moi
    Pour visualiser la chose :

    Un grand merci par avance

    • A force de tâtonner, je crois avoir réussit.
      Ce n’est pas du plus bel effet, notamment les articles ne modifient pas leur apparence en fonction de la page visitée (actif/innactif)
      Bref, si vous avez des tuyaux, n’hésitez pas. Merci

    • Bonjour, je suis nouvel utilisateur de SPIP et je ne connais pas vraiment les procédures à suivre ...
      D’abbord je voudrais dire un grand merci aux personnes qui ont écrit ce code de menu, très bien écrit à mon goût.

      Donc j’ai eu le même désir que toi d’ajouter les articles à ce menu. C’est chose faite et je te propose de mettre à disposition sur le web le nouveau code, histoire de ne pas poster un message inutilement long sur ce forum.

      Par contre, pour appeler le menu, faudra ajouter :

      <B_rubriques>
      <div class="menu">
      	<INCLURE(menu.php3){id_rubrique}{id_article}> <!--Ne pas oublier id_article -->
      </div>
      </B_rubriques>

      Tu pourras le trouver en cliquant sur le lien suivant :

    • Alors là, je dis

      bravo

      Ca fais 2 mois que je cherchait un truc, que je m’étais finalement résigné. Mais plus mon site avançait, plus je voulais afficher les articles d’une manière ou d’une autre, et de façon présentable.

      J’ai utilisé ton « hack ». C’est niket. J’ai personnalisé les icônes ainsi que l’endroi duquel part le menu (de la rubrique mère en cours, selon son mot clefs) et vraiment, je suis content.

      Merci
      Merci
      Merci

    • spip sicg

      Bonjour,

      Nous sommes actuellement en train de réaliser un site web sous SPIP. Nous avons intégré le fichier menu.html, et nous souhaitons avoir la possibilité d’ajouter les articles à ce menu.
      Nous venons de visiter le forum et nous avons pris connaissance de ton script. Cependant, nous avons un problème pour le mettre en place, ça ne veut pas fonctionner.

      Aurais-tu une solution à nous proposer.

      Merci par avance pour ta réponse.

      L’équipe de projet

    • moi je veux bien tenter de vous répondre, mais faudrait que vous décriviez un peu votre problème.
      Sinon, le site sur lequel j’ai mis en place le menu « personnalisé » est visible sur un autre site (le précédent à changé complètement)
      voici : http://www.cbondesign.com/

    • Moi aussi je suis très intéressé par l’affichage des articles dans le menu, mais malheureusement les liens vers les squelettes modifiés ne fonctionnent plus :-(

    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