Menu à arborescence PureDOMExplorer modifié

Comme cedounet lavait précisé sur son blog, nous étions à la recherche dun bon menu à arborescence en javascript.
PureDOMExplorer est apparu comme étant un des meilleurs disponibles actuellement sur la toile.

Mais malgré tout il ne correspondait pas totalement à nos besoins, cest pourquoi jy ai apporté quelques modifications et je les mets à votre disposition.

Pde permet de masquer larborescence et de ne lafficher quau besoin. Soit en cliquant sur le lien/limage soit en plaçant une balise strong.

Cette balise avait pour effet douvrir automatiquement larborescence la contenant. Mais dès lors il ny a pas dicône et il nest pas possible de refermer le menu. De plus il était possible douvrir plusieurs menus en même temps ce qui ne nous intéresse pas à moins de vouloir une page kilométrique.

Jai donc légèrement modifié le code (je me répète: très bien fait):

  • le strong ne doit plus être mis en dur dans le code html, il est ajouté dynamiquement en détectant le href correspondant au nom de la page
  • le menu contenant le strong reçoit également une image (ouverture/fermeture)
  • le menu contenant le strong est “refermable”
  • lorsque lon ouvre un menu les autres se referment

Voilou.

MàJ : petite modifiaction, limage qui se rajoute à gauche du lien parent nest plus dissociée de celui-ci, et la classe du lien parent est changée lorsque lon clique dessus.

Voici le code.

6 Comments

  1. Richard
    Posted 17 oct at 19:21 | Permalink

    Veuillez excuser mon français pauvre. Les modifications que vous avez faites sont très bonnes. Mais il semble comme si il ne manipule plus les images pour l’ouverture et la fermeture. J’ai comparé le manuscrit original à modifié et ne peux pas établir comment obtenir l’image manipulant dedans à modifiée.

  2. Richard
    Posted 17 oct at 21:48 | Permalink

    Les images sont des milieux dans le CSS. Quelle excellente idée.

  3. Posted 18 oct at 9:13 | Permalink

    HiRichard, I suppose that you speak English. As you said the images are inside the CSS file, but i dunno if that answers your question… :-/

    So if i can help you…

  4. Lilian
    Posted 7 mar at 16:32 | Permalink

    MERCI MERCI MERCI

    En fait, j’ai bricolé le script et cela a marché pour écrire le “strong” dans l’élement actif, mais ce n’était du loin aussi élégant comme votre solution.

    Vous ai-je déjà dis - merci? ;-) 8-)

  5. Posted 3 avr at 18:25 | Permalink

    Bonjour, Cette modification correspond à ce que je voudrais obtenir, mais malheureusement elle ne fonctionne pas chez moi :/ (j’ai retélécharger le fichier original pour vérifier que je n’y avais pas fait de modification)

    En fait quand je veux utiliser le fichier télécharger ici, l’affichage correspond à l’affichage obtenu avec javascript désactivé :s

    Y a-t-il des modifications à faire dans le code de la page ou dans la css ?

    Merci

  6. Posted 4 avr at 23:46 | Permalink

    Tu es bien sur de ne pas appeler un mauvais nom de fichier? Parce que ça ne devrait pasréagir comme cela, au pire ça ne fonctionne pas bien, mais comme si le js était désactivé, ça me semble bizarre.