But
À ceux qui me diront : « Mais pourquoi une éniéme contrib sur les menus déroulant ? », je répondrais : « Parce que ».
Plus sérieusement, il se trouve que les contrib (à mon sens) n’exploitent pas jusqu’au bout les listes, ni jquery. Jquery est maintenant intégré dans SPIP, ce qui offre pas mal de petits agréments concernant l’exploitation de javascript.
Références
Je vous invite à lire, dans un premier temps, l’ensemble des travaux listés dans Menus dépliants et Menus déroulants.
Puis pour les tenaces :
http://be.twixt.us/jquery/treeViewH...
http://jquery.bassistance.de/treeview/
Contraintes de travail
Parmi les contraintes que je me suis imposées, il y a :
avoir un rendu minimal acceptable sur l’ensemble des navigateurs
être exploitable dans le maximum de contexte (navigation, plan de site, ...)
n’utiliser que jquery (pas d’import de script extérieur), (code non intrusif)
n’utiliser que des liste (ul,li) mais pas de div ou a
Conséquence
Parmi les effets de bords désagréables, la version initiale n’est pas compatible avec Internet Explorer. Entre autre du fait que ce navigateur ne gére pas l’évènement click sur les listes. Toutefois un petit ajout, permet de remédier à ce détail. Allez voir en bas de page.
Se faire une idée
Il parait que des images parlent mieux que des mots. Les captures d’écrans ont été réalisées sous Opéra 9.1 (window XP), les rendus sont sensiblement les mêmes sous Firefox 2.
Un autre exemple, exploitant l’attribut #EXPOSE et une autre feuille de style
Squelette
Le squelette reste simple et peu innovant. Il se base énormément sur les autres contributions.
Les éléments à noter sont :
l’identifiant #arborescence, pour éviter de casser les autres listes présentes sur votre page.
la classe noeud, qui indique l’existence d’éléments fils.
la classe feuille, qui indique un élément terminal.
Dans le cadre d’une intégration comme menu de navigation,vous trouverez :
#EXPOSE afin de mettre en valeur l’article/rubrique consulté(e)
#SET{rub,(#ENV{cacher_article}|?{6666,#ID_RUBRIQUE})} , cette affectation permet de cacher les articles de l’arborescence si une variable cacher_article=1 est transmise via INCLURE.
Styles CSS
Nous pouvons maintenant mettre tout ceci en page. Le code est commenté pour restituer l’utilisation des différentes mises en page. Vous constaterez la présence de la classe .plier qui correspondra à l’action plier qu’effectuera le script. Par défaut un navigateur déplie les listes, c’est pourquoi vous ne trouverez pas de classe .deplier.
Script
Bon ce n’est pas tout ça, mais j’ai promis un menu dépliant. Dans un premier temps, il faut penser à mettre dans votre le <head> de votre squelette ceci :
#INSERT_HEAD
ou bien
<INCLURE{fond=inc-head}>
C’est ce qui permet d’accéder aux fonctions de jquery. De ce fait il faut mettre cette inclusion avant le code suivant.
Voyons voir ce que peut donner notre script proprement dit :
Comme vous pouvez le constater il est court et son action assez simple. Dans un premier temps, il cache l’ensemble des éléments contenu par un noeud. (à l’exception de Internet Explorer qui ne sait pas traiter .plier>li)
Ensuite, le script capture l’évènement click sur chaque noeud. Sur le noeud considéré la classe plier est ajoutée ou enlevée en fonction de sa présence. Le e.stopPropagation(); interdit la propagation de l’évènement sur les noeuds parents.
Et Internet Explorer ?
Pour les tenaces, il existe une solution qui nécessite de mettre un peu plus les mains dans le camboui.
Dans un premier temps, il nous faut détecter Internet Explorer. Les développeurs de jquery ont pensé à nous. Il existe une directive $.browser qui permet de déterminer le navigateur. Pour les curieux (uniquement :), il existe une surcharge plus évoluée (jqbrowser 2)
Pour commencer nous allons modifier la page pour Internet Explorer. Juste avant le code précédemment saisi, nous ajoutons :
Ce code va donc rajouter un lien nommé déplier devant chaque noeud. Et rajoute une classe pliermsie à l’élément fils qui permettra de le plier. Pour ceci rajoutons dans la CSS :
Et enfin nous rajoutons un bout de code pour traiter le (dé)pliage. Nous rajouterons donc ceci après les 2 blocs de code saisis jusqu’à présent.
Au final nous avons rajouté des comportements propres à Internet Explorer, sans modifier les éléments de base.
Conclusion
En mettant tout ceci dans un beau squelette ça devrait le faire, non ?
une puce pour plier/déplier le menu
RSS 2.0