SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Navigation > Menus dépliants > Menu PureDOMExplorer

Menu dépliant arborescent PureDOMExplorer

vendredi 16 mars 2007, par rpapa. Dernier ajout dimanche 25 mars 2007


Menu dépliant arborescent associant boucles SPIP et du javascript pour réaliser une menu respectueux du DOM


Mots-clés

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é
- Lycée Jacques Amyot

Principe

Le menu est une liste <ul>  <li>.....</li>  </ul>   associée à la classe pde de la forme suivante :

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

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é

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

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

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

Documents joints


Répondre à cet article

  • Menu dépliant arborescent PureDOMExplorer

    7 juillet 2008 19:32, par Nicolas

    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

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    25 septembre 2007 11:59, par Yffic

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

    Répondre à ce message

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    23 mars 2007 13:39

    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 !

    Répondre à ce message

    • Menu dépliant arborescent PureDOMExplorer 24 mars 2007 18:44, par JLuc

      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.

      Répondre à ce message

      • Menu dépliant arborescent PureDOMExplorer 21 août 2007 10:43, par Yann

        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

        Répondre à ce message

    Retour au début des forums

  • Menu dépliant se replie tout seul...

    19 septembre 2007 10:13, par FredL

    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 ?

    Répondre à ce message

    • Menu dépliant se replie tout seul... 20 septembre 2007 11:29, par FredL

      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.

      Répondre à ce message

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    5 juillet 2007 18:55, par Pixalion

    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.

    Répondre à ce message

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    6 avril 2008 13:33

    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

    Retour au début des forums

  • Problème de redéploiement du menu

    10 mai 2007 09:31, par 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 ?

    Répondre à ce message

    • Problème de redéploiement du menu 29 mai 2007 11:54, par 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

      Répondre à ce message

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    24 août 2007 17:27, par assobachant

    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

    Retour au début des forums

  • Menu dépliant arborescent PureDOMExplorer

    30 juillet 2007 12:51, par Yffic

    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

    Retour au début des forums

0 | 25 | 50



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et vie SPIP-Contrib | SPIP | L'autre.net