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 :
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
- 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
Menu Pure Dom Explorer
RSS 2.0
Vos commentaires
# Le 21 février 2009 à 09:26, par Gaëtan
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
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
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-pde id_rubrique=0 >
- /BOUCLE_art-menu>
j’ai enlevé le "<" avant Boucle etc. sinon ca n’apparait pas ds mon message même en le mettant en citation mais ils y sont ds mon squelette evidemment
Or si le menu apparait malheureusement il ne se déroule pas ?
Est ce que quelqu’un a une idée car je ne sais pas ce qui cloche.
Merci de votre aide
site http://cedalex.phpnet.org/paris1
Répondre à ce message
# Le 27 novembre 2008 à 20:58, par dinomaster
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
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
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 asso.bachant
même pb une piste trouvé ??
# Le 18 septembre 2008 à 18:45, par ?
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
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_rubrique doublons 1,1
BOUCLE_articles_unseul(ARTICLES) id_rubrique doublons 0,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
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...
# Le 6 avril 2008 à 13:24, par ?
lien hs ... ....
# Le 6 avril 2008 à 17:55, par Yffic
Ben non, je viens de tester
# Le 7 avril 2008 à 21:45, par asso.bachant
tu peux expliquer comment on l’install car la je pige rien
merci
_ www.bachant.info
# Le 7 avril 2008 à 22:29, par Yffic
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 ?
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 Jean Luc Girard
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
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
# Le 7 avril 2008 à 22:00, par asso.bachant
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
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 ?
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 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
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 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 asso.bachant
On peut avoir des précisions j’ai le même pb...
merci
www.bachant.info
Répondre à ce message
# Le 6 avril 2008 à 13:33, par asso.bachant
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
# Le 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 ?
# Le 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
# Le 29 mai 2007 à 13:57, par ?
Quel navigateur ?
quelle version de spip ?
je ne peux pas comme-ça répondre à ta question
# Le 29 mai 2007 à 14:01, par ?
pour le site du lycée clos maire, je ne vois pas de pb sous firefox, effectivement sous IE6 il y a un pb mais je ne sais pas le résoudre,
as-tu vérifié sous IE7
# Le 30 mai 2007 à 09:41, par ?
Oui c’est bien IE6, je n’ai pas testé avec la version 7
Mais apparemment IE6 pose le même problème à tous les sites qui ont ce menu (magnifique au demeurant)
Au passage ça détecte également des "erreurs" sur la page qui n’y sont pas sous Mozilla
Ce qui m’embête un peu, c’est qu’une majorité des utilisateurs doit posséder IE
Enfin au pire, on peut mettre une notification comme quoi le site est optimisé pour firefox ^^
# Le 30 mai 2007 à 09:45, par Michel
Version de Spip 1.9.1 [7502]
Squelette Sarka Spip : 1.9.1 [163]
# Le 4 juin 2007 à 16:45, par ?
Testé sous IE7 : même problème.
# Le 27 septembre 2007 à 10:28, par FredL
J’ai fait le test avec Opera 9.23 et le problème est le même. Il semble qu’il n’y ait que Firefox qui plie et déplie correctement ce menu...
Répondre à ce message