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 :
Voyez par vous-même : http://particuliers.edf.fr/rubrique...
Et voilà ce que ça donne en installation de base :
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
.
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é
Plateforme | Navigateur | Fonctionne | Ne 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 | . |
Discussions par date d’activité
95 discussions
Bonjour à tous
j’ai un petit soucis avec ce menu qui est super d’ailleurs
voila
la premiere fleche et la premiere de la premiere fleche ne fonctionne pas
en effet l’action se deroule, la fleche bouge mais les rubriques en dessous n’apparaissent pas
il faut que je clique sur le texte pour voir les rubriques apparaitrent en dessous et la premiere rubrique c’est pareil
mais la rubrique en dessous ca marche
j’ai fait le test en rajoutant une rubrique avec articles pour voir si ca venait de ma rubrique mais idem la premiere ne marche pas mais l’autre qui n’est plus en 1re position refonctionne
quelqu’un a une idée
pour infos c’est une erreur javascrip qui m’empeche de faire cette action
ligne : 17
car : 3
erreur : ’layer.style’ a la valeur Null ou n’est pas un objet
code : 0
url : http://xxxx
xxxx c’est mon site qui est en local
Moi pareil...
Répondre à ce message
personnellement j’utiliserai des ul et des li plutot que des tables pour mettre en forme le menu pour gagner en accessibilité et en sémantique, il faut juste spécifie le li list-type=none dans le css ( netscape 4 met un ? à la place de la puce mais au chiotte netscape 4).
A noter également que le menu ne déroule pas sous opera6
Sinon beaux boulot
L’accessibilité était à l’époque une notion bien moins hype que maintenant, donc on avait fait au plus rapide.
Mais c’est vrai qu’il serait possible de faire beaucoup mieux avec des listes !!!
Si quelqu’un a le courage d’essayer ... ;-)
bah en fait je l’ai fait moi même du moins c’est en cours et reussi dans une version non spip restera plus qu’a le spiper après
Bonjour,
J’ai lu un des pessages que vous avez laissé en mars 2004 sur http://www.spip-contrib.net/article.php3?id_article=103 .
Peut-être pourrez-vous m’aider :
J’aimerais savoir comment faire pour que une branche de menu ayant été « étendue » le reste même après le refresh de la page ou un click sur une des sous pages de cette section « ouverte ».
J’ai implémenté l’arborescence dynamique et contextuelle trouvée ici :
http://www.spip-contrib.net/article103.html?var_recherche=menu
mais le problème persiste.
Merci pour votre aide.
Gianni
Répondre à ce message
Salut, tout d’abord félicitation pour ce menu, j’orais juste une question :
Comment déplier d’emblée une des branche du menu ? C’est à dire que comme sur edf, je voudrais que les sous-rubriques d’une rubrique s’affichent sans que l’internaute ait cliqué pour les afficher.
En gros, pour bien me faire comprendre, quend on va sur edf particuliers, on a directement accès à ventilation ou isolation, sans qu’on ait cliqué sur « fiches pratiques/vos appareils/chauffage/ »
Voilà, j’ai vu la question posée sur un autre sujet, je suis donc pas seule à m’y intéréssé, et une réponse serait la bienvenue :)
Merci à celui qui me la donnera !
Répondre à ce message
salut,
j’ai un pb parce que le « INCLUDE » fonctionne bien dans une page rubrique mais pas dans la page sommaire dans laquelle le mnu ne s’affiche pas...
est-ce que j’aurais loupé quelquechose ?
merci d’avance si qqu’un à un idée ladessus...
ricco
Répondre à ce message
Bonjour,
Je viens d’installer le menu dynamique et ça marche parfaitement, si ce n’est un petit détail. Je n’arrive pas à faire ouvrir la rubrique dans le frame d’à coté. A chaque fois que je clique sur une rubrique, ça l’ouvre à l’endroit ou se trouvait le menu. Je n’arrive pas à trouver dans le code le lien à modifier.
D’autres part, est il possible de modifier les liens afin d’afficher une page faite à la main plutôt que les pages préconstruites ?
Merci d’avance et désolé de poser des questions aussi simples mais je débute...
Dans ta page menu.html cherche les lignes ou tu as < a ref= blabla... > et à la fin juste avant le « > » tu mets target=nom_de_ton_cadre et voilà ton lien s’ouvrira là où tu le souhaites...
Répondre à ce message
Maintenant qu’avec le multilinguisme les langues sont dans des secteurs, comment faire pour l’adapter à ceci ?
Il faudrait trouver un moyen pour qu’il n’affiche pas la première rubrique de la racine généralement appelée « fr », « en »... et directement afficher les sous-rubriques et faire la même chose avec les autres langues, tout ceci sans que pour chaque nouvelle langue nous devions entrer dans le script et indiquer une rubrique particulière...
je me pose la même question... il suffirait de changer l’id_parent a la ligne 37 avec le n° du secteur... mais il faut autant de menus que de langues... est-ce possible avec un seul menu ?
merci
Répondre à ce message
Comment faire pour que ce (superbe) menu soit déplié d’emblée (sur la page sommaire) ?
merci
tjrs pas de réponces ? moi aussi je suis trés intereser par la solution.. ;)
merci..
François Schreuer m’avait écrit dans le forum : « Les deux fonctions sont bouton_block_visible et bouton_block_invisible, il faut ajouter une structure conditionnelle qui, si id_rubrique est le bon et si la condition requise est ok, charge bouton_block_visible au lieu de bouton_block_invisible. »
j’ai pas testé ça, c’était trop difficile pour moi...
Répondre à ce message
Bonjour,
J’utilise cette arborescence depuis quelques mois et cela fonctionne très bien.
Je suis maintenant passé à la version 1.7 de SPIP, notamment pour son support du multiliguisme, et je cherche comment prendre en compte la langue pour n’afficher l’arborescence que dans la langue active.
Merci d’avance pour votre aide.
Je rencontre également le même problème, et je ne dispose pas des connaissances suffisantes en la matière pour le résoudre. J’essaye tant bien que mal d’en comprendre le fonctionnement, mais j’ai plutôt l’impression de me perdre dans des chemins inutiles...
Si quelqu’un a la solution, n’hésitez pas à nous en faire part... Vous serez bien charitables...
Avec une langue par secteur, comme sur mon phpHeaven, c’est simple, il suffit de limiter le menu au secteur courant.
Avec des langues mélangées dans les contenus, c’est sans doute un peu plus complexe, je n’ai pas encore essayé.
un grand bravo !
mais « c’est simple » pour toi ! ;) bon, j’ai quand même pris mon courage à 2 mains et je me suis dit que j’allais étudier comment est fait ton phpheaven... c’est exactement ça que je cherche à faire depuis 2 semaines ! et là je ne comprends rien ! les urls ont été réécrites ? comment fait-on pour acceder aux squelettes ?
Répondre à ce message
Un site sans arborescence textuelle (ca devient vite complexe) et un autre avec (cool). Y a pas photo. Un grand bravo pour la contrib !
Répondre à ce message
Félicitations pour ce menu contextuel et hiérarchique. Je l’ai utilisé et un peu customisé pour mon site, cela rend bien.
J’ai tout de même deux petites questions :
1. Je voudrais afficher les articles de la rubrique en cours sur la même page, je sais qu’il y a déjà une explication à ce sujet mais je ne sais pas où mettre les boucles articles, je ne me repère pas bien dans le php et tout le reste du ficher menu.html. Quelqu’un pourrait-il me renseigner ?
2. Quand on clique sur les rubriques, il nous renvoie sur les pages de type rubrique.html, pourquoi pas, mais dans mon cas, j’ai opté pour une réorganisation totale du squelette du site. J’aimerais que lorsqu’on clique sur une rubrique il envoie sur la page qui correspond à cette rubrique. Je suppose que c’est possible mais je ne sais pas quel paramètre modifer...
Merci à Nicolas pour ce menu,
et merci d’avance à ceux qui prendront la peine de me répondre ;))
Aurore
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 :
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.
Suivre les commentaires : |