Accueil > Navigation > Menus réactifs > Menu PureDOMExplorer > Menu dépliant arborescent PureDOMExplorer

Menu dépliant arborescent PureDOMExplorer

16 mars 2007 – par rpapa – 65

5 votes

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

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é
- Sciences -indus en CPPGE

Principe

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

<ul class="pde">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a>
    <ul>	
      <li><a href="#">Link 3_1</a></li>
      <li><a href="#">Link 3_2</a>
        <ul>
          <li><a href="#">Link 3_2_1</a></li>
          <li><a href="#">Link 3_2_2</a></li>
          <li><a href="#">Link 3_2_3</a></li>
          <li><a href="#">Link 3_2_4</a></li>
        </ul>
      </li>
      <li><a href="#">Link 3_3</a></li>
      <li><a href="#">Link 3_4</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a></li>
</ul>

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

<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
	<BOUCLE_smenu1(RUBRIQUES){racine}{par num titre}{doublons}>
  <li>
  <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
  [(#TITRE|supprimer_numero)]</a>
		<B_smenu2><ul [class="(#EXPOSE{show,hide})"]>
			<BOUCLE_smenu2(RUBRIQUES){id_parent}{par num titre}>
      <li><a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
      [(#TITRE|supprimer_numero)]</a>
					<BOUCLE_ssmenu(boucle_smenu2)></BOUCLE_ssmenu>
			</li>
      </BOUCLE_smenu2>
		</ul>
    </B_smenu2>
	</li></BOUCLE_smenu1>
</ul>

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é

<BOUCLE_exclus(RUBRIQUES) {titre_mot = exclusion }{doublons} ></BOUCLE_exclus>
<ul class="pde">
	   <BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{doublons}>
	    <li>  <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" >
            [(#TITRE|supprimer_numero)]</a>
          <B_sous-menu>
          <ul [class="(#EXPOSE{show,hide})"]>
          <BOUCLE_sous-menu(RUBRIQUES){id_parent}{par num titre}{doublons}>
           <li class="sousrub"> <a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero)]</a>
					 <BOUCLE_recursive(boucle_sous-menu)></BOUCLE_recursive> </li>
          </BOUCLE_sous-menu>
           <BOUCLE_art1(ARTICLES){id_rubrique}>
                 <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero|couper{20})]</a></li>
           </BOUCLE_art1>
          </ul>
          </B_sous-menu>
           <B_art2>
           <ul [class="(#EXPOSE{show,hide})"]>
           <BOUCLE_art2(ARTICLES){id_rubrique}>
                 <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" >
                 [(#TITRE|supprimer_numero|couper{20})]</a></li>
           </BOUCLE_art2>
           </ul>
            </B_art2>
          <//B_sous-menu>
      </li>
 	   </BOUCLE_menu-racine>
</ul>

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 <BOUCLE_art-menu(ARTICLES){id_article}> <INCLURE {fond=menu-pde}{id_rubrique}> </BOUCLE_art-menu>

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

<style type="text/css">	@import '#CHEMIN{pde.css}';	
    </style>
<script type="text/javascript" src="spip.php?page=pde.js">
    </script>

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

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.
Mettre le menu en plugin

Dernière modification de cette page le 7 octobre 2009

Tout afficher

Vos commentaires

0 | 10 | 20

# Le 1er avril 2011 à 10:46, par bigan En réponse à : Menu dépliant arborescent PureDOMExplorer

Merci pour cet article, j’ai utilisé votre contribution en remplaçant le js par du css3. J’obtiens un menu déroulant qui fonctionne sous firefox épiphanie chromium et opéra (pour ie je ne sais pas je n’ai plus rien pour le tester et ça m’importe peu...).
Le résultat est visible sur mon bac à sable http://www.mbigan.tk

Salutations.

Répondre à ce message
# Le 1er novembre 2010 à 12:40, par Dragon En réponse à : Menu dépliant arborescent PureDOMExplorer

Bonjour,

Je ne comprend pas : la plupart des contributeur sont géniaux mais ils ne répondent pas aux utilisateurs.

Rpapa, je me lancerai bien dans l’utilisation de ta contribution mais à quoi bon si c’est pour galérer comme les autres !

C’est quoi qui vous permet de passer des heures à programmer et 0 minutes pour communiquer ?

D
- # ^ Le 1er novembre 2010 à 14:01, par rpapa En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  faisons une liste
  - je ne suis pas génial
  - tu es un grand déçu
  - tu hésites à démarrer
  - je ne programme pas des heures
  - aujourd’hui je communique
  - tu n’as pas posé de questions
  - je n’ai pas utilisé cette contrib depuis plusieurs années mais elle tourne toujours sur le site de http://www.donationlousalome.org/
  - je ne sais pas quoi dire d’autres !!!
  
  Bises !!!!
Répondre à ce message
# Le 21 février 2009 à 09:26, par Gaëtan En réponse à : Menu dépliant arborescent PureDOMExplorer

Bonjour,

Cela fonctionne mais je ne vois pas comment mettre en gras la rubrique courante ?

Merci

Le site ici :
http://www.dinansportcanin.fr

Répondre à ce message
# Le 24 janvier 2009 à 22:25, par toto En réponse à : Menu dépliant arborescent PureDOMExplorer

bonjour j’aurais vraiment besoin d’aide car rien ne fonctionne comme indiqué sniff
je suis sous spip 2.0.3 et je voudrais utiliser ce menu déroulant mais ca ne marche pas pourtant :

1-/ j’ai installé les fichiers (menu-pde.html/pde.css/pde.js) dans le rep squelettes
2-/ j’ai ajouté à mon squelette article le code suivant afin d’appeler la page css et le script gérant le menu

<script type="text/javascript" src="//static-contrib.spip.net/spip.php?page=pde.js"> </script>

3-/j’ai ensuite ajouté le code ci-dessous pour appeler le fichier menu-pde.html qui contient la boucle d’affichange des rubriques et articles etc.

- BOUCLE_art-menu(ARTICLES)id_article>
- INCLURE fond=menu-pdeid_rubrique=0>
- /BOUCLE_art-menu>

j’ai enlevé le "<"> http://cedalex.phpnet.org/paris1

Répondre à ce message
# Le 27 novembre 2008 à 20:58, par dinomaster En réponse à : Menu dépliant arborescent PureDOMExplorer

Même problème que précédemment, je n’arrive pas à déplier la rubrique courante.

Répondre à ce message
# Le 19 septembre 2007 à 10:13, par FredL En réponse à : Menu dépliant se replie tout seul...

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é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 ?
- # ^ Le 20 septembre 2007 à 11:29, par FredL En réponse à : Menu dépliant se replie tout seul...
  
  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.
- # ^ Le 7 avril 2008 à 21:49, par spipfactory En réponse à : Menu dépliant se replie tout seul...
  
  même pb une piste trouvé ??
- # ^ Le 18 septembre 2008 à 18:45, par ? En réponse à : Menu dépliant se replie tout seul...
  
  Par hasard, y aurait-il eu une réponse à cette question ?
  
  Merci,
  Kim
Répondre à ce message
# Le 7 juillet 2008 à 19:32, par Nicolas En réponse à : Menu dépliant arborescent PureDOMExplorer

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
# Le 25 septembre 2007 à 11:59, par Yffic En réponse à : Menu dépliant arborescent PureDOMExplorer

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-tree-menu-puredom/
- # ^ Le 6 avril 2008 à 13:24, par ? En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  lien hs ... ....
- # ^ Le 6 avril 2008 à 17:55, par Yffic En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  Ben non, je viens de tester
- # ^ Le 7 avril 2008 à 21:45, par spipfactory En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  tu peux expliquer comment on l’install car la je pige rien
  
  merci
  www.bachant.info
- # ^ Le 7 avril 2008 à 22:29, par Yffic En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  Je l’ai utilisé et adapter pour parcourir les rubriques d’un secteur. C’est un peu plus complexe (http://ruelibre.fr/-Regions-.html)... Sinon il suffit de faire ce qui est dit. appel au js dans le head. Puis dans le body tu indiques tes menus et sous-menus. Je ne vois pas sur quoi tu bloques... Détaille un peu plus
Répondre à ce message
# Le 23 mars 2007 à 13:39, par ? En réponse à : Menu dépliant arborescent PureDOMExplorer

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 !
- # ^ Le 24 mars 2007 à 18:44, par JLuc En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  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.
- # ^ Le 21 août 2007 à 10:43, par Yann En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  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
  <BOUCLE_menu-racine(RUBRIQUES){racine}{par num titre}{lang}{doublons}> <li> <a href="#URL_RUBRIQUE" title="[(#TITRE|supprimer_numero)]" > [(#EXPOSE{<strong>,''})] [(#TITRE|supprimer_numero)]</a> [(#EXPOSE{</strong>,''})] <B_sous-menu> <ul [class="(#EXPOSE{show,hide})"]> <BOUCLE_sous-menu(RUBRIQUES){id_parent}{par num titre}{doublons}> <li class="sousrub"> <a href="#URL_RUBRIQUE"title="[(#TITRE|supprimer_numero)]" > [(#EXPOSE{<strong>,''})] [(#TITRE|supprimer_numero)]</a> [(#EXPOSE{</strong>,''})] <BOUCLE_recursive(boucle_sous-menu)></BOUCLE_recursive> </li> </BOUCLE_sous-menu> <BOUCLE_art1(ARTICLES){id_rubrique}> <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" > [(#TITRE|supprimer_numero|couper{30})]</a> </li> </BOUCLE_art1> </ul> </B_sous-menu> <B_art2> <ul [class="(#EXPOSE{show,hide})"]> <BOUCLE_art2(ARTICLES){id_rubrique}> <li class="art"><a href="#URL_ARTICLE" title="[(#TITRE|supprimer_numero)]" > [(#TITRE|supprimer_numero|couper{30})]</a> </li> </BOUCLE_art2> </ul> </B_art2> <//B_sous-menu> </li> </BOUCLE_menu-racine>
- # ^ Le 7 avril 2008 à 22:00, par spipfactory En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  je n’ai pas ce pb
  
  <ul [class=" [(#EXPOSE{<strong>,''})]"]>
  
  www.bachant.info
Répondre à ce message
# Le 5 juillet 2007 à 18:55, par Pixalion En réponse à : Menu dépliant arborescent PureDOMExplorer

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.
- # ^ Le 6 juillet 2007 à 13:14, par ? En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  normalement, il fonctionne comme cela,
  
  n’as-tu pas oublié de passer l’id_rubrique dans l’inclure
  
  mets un lien pour voir
- # ^ Le 6 juillet 2007 à 14:05, par Pixalion En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  En fait c’est bon, c’était une erreur de ma part.
  Merci et bravo pour l’info et l’tuto
- # ^ Le 2 avril 2008 à 17:41, par natacham En réponse à : Menu dépliant arborescent PureDOMExplorer : apparition de la rubrique courante seulement
  
  J’ai installer le menu dépliant arborescent PureDOMExplorer et je ne veux faire apparaitre que la rubrique courante et ses sous rubriques dans le menu depliant.
  donc pas les autres rubriques principales et pas les articles.
  
  Novice en la matière je ne sais comment faire.
  Quelqu’un peut il m’aider ? merci
- # ^ Le 3 avril 2008 à 09:53, par natacham En réponse à : Menu dépliant arborescent PureDOMExplorer : apparition de la rubrique courante seulement
  
  en remplaçant racine par id_rubrique pour
  > BOUCLE_menu-racine
  
  Merci cela fonctionne.
  
  Mais... et oui encore un problème, avec cette manip, lorsque j’avance dans la hiérarchie et que je clique sur une sous rubrique je n’ai du coup plus d’affichage de ma rubrique supérieure et plus des autres sous rubriques non plus.
  
  Comment faire ?
- # ^ Le 7 avril 2008 à 21:42, par spipfactory En réponse à : Menu dépliant arborescent PureDOMExplorer
  
  On peut avoir des précisions j’ai le même pb...
  
  merci
  
  www.bachant.info
Répondre à ce message

0 | 10 | 20

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Veuillez laisser ce champ vide :
Courriel (non publié)

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message
Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Ajouter un document

gif, jpg, png

SPIP-Contrib

Menu dépliant arborescent PureDOMExplorer

Préliminaires

Principe

Les Boucles

Installation

Evolutions

Rubriques

Derniers commentaires

Compatibilité

Téléchargements

Vos commentaires

Bonjour et merci beaucoup pour cette contribution,

Répondre à cet article

Ça discute par ici

Enluminures typographiques V3

Refonte de l’identité graphique

En travaux 2.0

ScolaSPIP 4

Agenda Fullcalendar facile

Ça spipe par là

SPIP Blog

SPIP - Seenthis

SPIP Forums

SPIP-Zone

SPIP SVN