Principe
Le précédent plugin mélangeait deux choses :
- le contenu du menu
- l’effet accordéon qui y était associé, c’est à dire la présentation « en tiroir ».
Cette nouvelle version du plugin s’occupe uniquement de l’effet accordéon. Il ne s’occupe pas du contenu de ce menu. Le travail peut-être délégué au plugin Menus ou à une noisette Aveline par exemple ou même géré indépendamment en squelette. Il suffira de donner au ul principal du menu la classe accordeon
ou bien de remplir le champ par votre class ou votre identifiant dans la configuration du plugin (ajout du 14 aout 2012).
Il ne s’occupe pas non plus de l’apparence (CSS).
Installation
Le plugin s’installe comme n’importe quel plugin.
Il nécessite toutefois le plugin JQueryUi, qui est livré en standard avec SPIP 3.
À noter qu’il peut évidemment s’installer avec STEP
Création du menu
On peut créer le menu avec le plugin Menus, et l’installer dans son squelette à l’endroit souhaité. Je renvoie donc à la documentation du plugin Menus.
Pour que le menu créé ait un effet accordéon, il suffit de lui accorder la classe accordeon
dans le champ correspondant du plugin Menus.
Attention : pour que l’effet accordéon fonctionne, le menu ne doit pas avoir plus de 2 niveaux.
Exemple
Je souhaite avec un menu accordéon qui « accordéonne » sur les rubriques de premiers niveaux, en affichant le cas échéant les rubriques du niveau inférieur.
Suivant la documentation du plugin Menus :
- j’insère dans mon squelette le code suivant :#INCLURE{fond=inclure/menu, env, identifiant=menu}
- Je crée un menu dont l’identifiant est menu
et auquel j’accorde la classe CSS accordeon
- Dedans je crée une entrée de type « Liste ou arborescence de rubriques » que je limite à 2 niveau.
Un dessin vaut mieux qu’un discours :
Configuration avancée
La configuration permet d’ajouter des options, en suivant la syntaxe : option:valeur,option2:valeur
etc. La liste des options se trouve sur le site de Jquery.
Le panneau de configuration du plugin permet aussi de préciser votre identifiant ou votre class, laissez le à .accordeon
soit sa valeur par défaut si vous ne comprenez pas !
Le panneau de configuration est accessible via :
- Configuration->Accordéon sous SPIP 2.1.
- Squelettes->Menu JQuery Accordéon sous SPIP 3 ou SPIP 2.1 avec le plugin bandeau
Verrouillage de la configuration
Depuis la version 3.2, un webmestre peut verrouiller la configuration du plugin en créant dans son dossier squelettes :
- un fichier accordeon/identifiant.html
contenant l’identifiant du menu et remplaçant le champ « identifiant » du formulaire de configuration.
- un fichier accordeon/options.html
contenant les options du menu (sans les {}
, et remplaçant le champ « options » du formulaire de configuration.
Exemple d’option simple
Il s’agit de demander au menu accordéon de s’ouvrir sur la rubrique courante.
Dans le panneau de configuration, on met
active:'.on a'
En effet, le plugin Menu marque d’une class .on
la rubrique courante.
Exemple d’options complexe
Dans cette illustration, le code demande à déplier en accordéon le menu qui a l’identifiant #listmenu
, il s’applique ici sur un menu fermé de rubriques à 2 niveaux qui se dépliera d’un clic, tandis qu’on accède aux liens de premier niveau par un double-clic. Lorsque la rubrique parente est active, le menu est ouvert sur celle-ci. D’autre part autoHeight: false,
permet de laisser le plugin calculer la hauteur à déplier, évitant de grands blancs si vous n’avez un nombre de sous-rubriques égales…
Voici un exemple de ce code particulier à coller dans les options de la configuration, sans ajout de parenthèses ou d’accolades.
event: 'click',
collapsible:true, // to close all
header: 'a.hac',
active: 'a.hac.on',
autoHeight: false,
navigation: true,
navigationFilter: function(){
$('#listmenu a.hac').dblclick(function(){
lien=$(this).attr('href');
document.location = lien;
return true;
});
}
Discussions par date d’activité
22 discussions
Bonjour,
Je suis sous Spip 3.0.4 et j’ai tout sauf :
1. comme 19Marine91, j’ai le petit triangle sur le titre des rubriques que je n’arrive pas à enlever malgré mes 4heures de tentative. Comment enlever ce triangle ?
2. l’autre souci est que les rubriques se mettent en ligne, les unes derrière les autres. Il y a bien l’effet accordéon mais ce serait encore mieux si les rubriques étaient l’une au-dessus de l’autre. Là-aussi, je ne trouve pas où modifier le css pour disposer les rubriques sous forme de liste, les unes au dessus des autres.
Merci d’avance.
Bonjour, désolé je n’ai pas eu le temps de me pencher sur les modifications de l’accordéon sous SPIP 3 avec la nouvelle version de jqueryUI.
la solution pour le triangle (et j’ai mis du temps à trouver) est de mettre une option dans le formulaire de configuration du plugin (disponible dans la rubrique squelette) :
Si vous avez d’autres réglages, les séparer par des virgule. Faite ensuite un recalcul des caches, notamment du cache js, et vider le cache du nav. Cela devrait normalement faire l’affaire.
Dans vos css perso, ajoutez aussi
Je ne sais pas encore si je vais modifier le plugin pour installer ces réglages par défaut ou bien changer la doc. Il faut que je reflechisse à ce qui est le plus pertinent.
Ps : utilisez vous un outils style firebug ? cela vous aurez aider à trouver le style défaillant.
la version du plugin qui sortira cette nuit à 1h du matin devrait faire cela tout seul. Attention, pas de changement de numéro de version, mais passage de l’état « dev » à test.
Bonjour Maïeul,
C’est la bonne surprise du matin et je teste tout de suite. Je vous tiens au courant. J’utilise effectivement Firebug, ça aide énormément :-).
Comme les autres fois, impec et ça marche super bien ! Un grand merci Maïeul.
Une dernière chose.
Je n’arrive pas à changer la div a de li.menu-entree.item. Je voudrais mettre color : #666566 ; text-decoration : none ; mais ça ne me le prend pas malgré tous mes essais... un peu partout.
bon, ok. je modifie la doc en conséquence, et je regarde après votre problème de li.
« What a wonderful world » ! Merci.
vous être sur de votre classe ? il y a pas de
li.menu-entree.item
avec le plugin menu sous SPIP 3....En fait, c’est ce que je vois avec Firebug et je ne comprends pas pourquoi Spip ne corrige pas la couleur, au moins, puisque cette instruction semble être prise en compte.
Je vous joins la copie écran de Firebug.
a ! c’est pas avec le plugin menu que vous l’utilisez, mais avec les menu lateral standard de SPIP. Ok.
Votre problème de couleur vient que vous avez un lien dans votre
li
. C’est donc (si je ne m’abuse) lea
qu’il faut styler (et le pb n’est pas lié à SPIP, mais au CSS)Ok, je regarde ça.
Répondre à ce message
Bonjour,
Cet un plugin super c’est vrai. Un moment je bloquais et ça s’est débloqué je sais pas comment^^
Bref, j’aimerais qu’il , affiche même les rubriques sans articles (car les rubriques peuvent contenir du texte sans articles).
En affichant simplement le menu avec inc-menu_rubrique, il suffisait de rajouter tout, là je sais pas, il me le fait pour l’un d’entre eux seulement. Savez quoi faire ?
Cordialement
bonjour, désolé, je n’ai rien compris.
Pouvez vous expliquer comment est construit votre menu. Avec des squelettes perso ? avec le plugin menus ?
Bonjour,
Désolée pour la réponse tardive, je m’étais penché sur un autre problème. Merci à vous pour votre rapidité.
J’ai construit le menu à l’aide du plugin menus comme indiqué. Ensuite intégré dans un squelette perso.
J’ai plusieurs rubriques. Certains ont des articles, d’autres non. Celles qui n’ont pas d’articles possède tout de même du contenu.
Mon menu affiche sans problème les rubriques possédant des articles. Mais il n’affiche que certaines rubriques n’ayant aucun articles et n’affiche pas l’accueil.
J’espère m’être exprimé plus clairement.
En vous remerciant
Cordialement
Bonjour,
en ce cas le problème ne vient pas de menu accordéon, mais du plugin menus. Il faudrait demander de l’aide dans le forum de ce plugin.
cordialement
J’ai résolu certains problème, finalement j’ai un affichage illisible et surtout un-cliquable (je sais pas si ça se dit. J’ai joins une image.
là, comme cela je ne peux pas vous aider. Je n’ai ni l’adresse du site, ni des informations sur les css que vous utilisez …
Je n’ai pas encore changer le CSS
Concernant l’adresse, elle n’a pas public... le site est en travaux, je ne peux présenter un site sans menu.
C’est possible de MP pour détails privé ?
En tout cas l’effet accordéon n’est pas là... quand tout le jquery ne chargeait pas, c’était plus ergonomique
en bidouillant le CSS j’ai le menu qui va à la ligne (voir image) mais le clic ne charge aucune page (la mini-flèche se pli et dépli) et ne fait pas apparaitre de déroulement.
Ce n’est pas un problème de js ça ?
contact moi via le formulaire
quelle version de SPIP ?
la version qui sort cette nuit devrait normalement résoudre tout ce sproblèmes, pour mettre des styles standard plus correct.
attention : pas de changement de numéro de version, mais simplement passage à l’état test.
Répondre à ce message
Bonjour,
Je viens de de transférer mon site sur un autre hébergeur. J’ai bien fais une sauvegarde de la base. Sur le nouveau hébergeur, mon site fonctionne hors, les plugings que j’ai installé (menu, menu accordeon 2) sont activés mais ne sont pas pris en compte dans mes pages de mon site.
Quelqu’un aurait une réponse ?
merci beaucoup !
vous auriez une adresse ? avez vous vider le cache ?
Répondre à ce message
le contexte : Je suis sous spip 3
Je m’escrime avec le plugin accordéon depuis deux jours :
Pourquoi, si j’ai fait fonctionné, sans problème, un autre plugin de menu, utilisant jQuery et s’appuyant sur le plugin « Menu » (le plugin « Menu jQuery Superfish »),
je n’y suis pas arrivé avec le plugin « Menu accordéon 2 » ?
une chose m’étonne :
- parmi les sous-dossier du plugin « Menu jQuery Superfish », il y a un sous-dossier « css » qui contient 3 feuilles de styles css (superfish.css, superfish-navbar.css et superfish-vertical.css).
- je ne vois rien d’équivalent dans le dossier du plugin « Menu accordéon 2 ».
- Quelle est la différence de fonctionnement entre ces 2 plugins qui fait que dans un cas il y a des feuilles de style css et dans l’autre non ?
Merci d’avance.
Il n’y a pas de CSS car nous laisson la maitrise des css au webmestre. Le menu accordéon est juste là pour le jquery.
Pour le fonctionnement sous SPIp 3, étant donné que vous ne donnez ni la méthode que vous avez suivi ni les problèmes que vous avez rencontré, j’aurais du mal à vous aider.
Comme dit Maïeul, le plugin s’appuie sur un autre plugin, jquery_ui, intégré au core en spip3. Et c’est ce dernier qui charge les js (et éventuellement les css les spip2, en spip3, je ne sais pas)... Mais tu peux très bien, récupérer les css et images d’un thème « tout fait » sur le site de jquery_ui et le mettre dans tes squelettes persos... Bref c’est moins immédiat que superFish, mais plus malléable au final...
Répondre à ce message
oui oui, j’ai bien fais un menu avec le plugin menu, j’ai mis la classe accordeon, j’ai bien vérifié que le JQuery UI etait installé... et rien.
bizarre,
pourriez vous m’envoyer par mail votre code ?
Bonjour,
Moi aussi, même problème : le plugin accordéon ne change rien : liste cliquable rubriques et articles...
Installé sur la dist :
ou
Plugin JQuery UI et plugin menu installés
Merci d’avance
auriez vous un site où je pourrais regarder tout cela ?
Bonjour,
C’est en local... j’ai l’impression que le jquery n’est pas détecté...
...
Je vais essayer de mettre en ligne quelque part...
Même problème que mes collègues ! Rien ne s’affiche...
même réponse qu’à vos collègues …
chez moi ca marche, donc en l’absence de site de démo, dur d’aider :-)
Au temps pour moi... Tout marche parfaitement, il ne me reste plus qu’à le customiser :)
peut tu dire ce qui n’allait pas ? ca peut servir aux collègue ;-)
J’avais juste pas pris la bonne option d’affichage avec le plug Menu (Rubriques et non articles de rubrique).
En revanche, je n’arrive pas à trouver la feuille de style qui donne l’apparence actuelle à ce menu (fond gris dégradé et flèche active...), ça me dépannerait bien de savoir :)
lib/jquery-ui-1.8.9/themes/basejquery.ui.accordion.css
à noter que jquery propose de fabriquer facilement son thème : http://jqueryui.com/themeroller/
n’oublie pas d’utiliser le mécanisme de surcharge de spip.
Bonjour,
le plugin est extra ! J’ai quelques questions toutefois d’ordre pratique :) Je constate que lorsque mon event est « click » l’accès aux articles en racine (niveau 0 du menu) ne sont pas accessibles tandis qu’en « mouseover » je n’ai pas de soucis... Où corriger ce bug ?
Je tente de trier selon mon bon vouloir les articles et sous-rubriques du niveau 0 du menu appartenant tous à la rubrique n°11... Possible ?
Merci pour vos réponse :)
pour le second point il faut numéroté les article et sous rubrique sous la forme
XXX. Tittre
, puis activer la suppression du numéro avec le couteau kiss (de préférence ne pas prendre le couteau suisse) ou avec le fichier mes_options.php minimal (http://geekographie.maieul.net/Un-fichier-mes_options-minimal).Pour le premier point, la raison est simple : le clique enclenche le basculement sur l’entrée réeel. Mais sur ce site http://www.planete-sciences.org/astro/ je n’ai pas ce problème avec le réglage suivant :
.
Vérifiez les caches.
Bonjour,
comment avez vous fait pour intégrer la classe .on en fonction de la rubrique ouverte ? Utilisez-vous #GET ? J’y arrive en PHP mais je ne suis pas très sûre avec le langage SPIP...
Merci pour votre réponse.
normalement le plugin menus intégre directement cela dans ses fonctions. Pouvez vous donner un exemple de code ?
Voila mon code
ce code, vous l’appeler directement où c’est un code du plugin menu ? je ne comprend pas pourquoi vous ne passez pas par le plugin menu, comme indiqué dans la documentation
C’est bien le plugin menu sauf que j’ai modifié le code interne pour appeler les rubriques et les articles afin de les classer comme je le souhaitais.
hum,
vous faites ce que vous voulez hein ! mais faites bien attention à bien surchargez le code et non pas à modifier directement les fichiers.
Normalement le filtre
menu_exposer
se charge de cela, à priori. Sinon regarder du coté du filtreexposer
(dans la documentation de spip)Ah non j’ai été trop vite, le code est plutôt :
Répondre à ce message
Bonjour à tous,
J’ai un problème de compatibilité de plugin, sur SPIP 2.0.10, le plugin (il s’agit là de la première version) ne fonctionne pas en même temps que le plugin sjcycle (première version également).
Je suppose qu’il s’agit d’un problème de version de Jquery... Quelqu’un a-t-il une idée plus précise du problème ??
Merci d’avance.
quel est la nature du non fonctionnement ? un message d’erreur ?
a priori le plugin est prévu pour fonctionner sur 2.1, pas sur 2.0
Répondre à ce message
Bonjour et merci pour ce plugin.
Je ne l’utilise pas pour faire un menu mais pour avoir une gestion de l’accordéon de jQueryUI dans les articles.
Je colle donc mon code dans le champ texte d’un article :
Ensuite, c’est très étrange : l’affichage se passe très bien si je mets ma boucle sur la page d’accueil du site, mais dans les pages « articles » l’animation ne fonctionne pas. J’ai beau retourner le problème je ne trouve pas de raison à ça.
Auriez vous une idée ?
Merci !
Bon en fait c’est résolu. J’avais un petit conflit avec un autre script jquery...
Répondre à ce message
Bonjour,
je développe en local un site sur lequel je voulais installer le plugin accordeon. Mais une fois activé, il ne fonctionne pas. C’est à dire que je n’ai aucune mise en forme « accordeon » mais simplement une liste basique... j’ai raté une étape ?
Merci
avez vosu bien créé le menu avce le plugins menus ? avez vous bien mis la classe css « accordeon »
Répondre à ce message
Merci pour votre rapidité, je vais regarder ça !
Répondre à ce message
Bonjour,
Je ne suis pas une pro mais ne demande qu’à comprendre et à essayer. J’ai installé spip il y a 3/4 jours.
J’ai téléchargé le plugin accordeon et tout fonctionne.
Mais j’aimerai qu’en cliquant sur les titres de mes articles, par exemple, le texte y correspondant apparaisse. Et là, je ne sais pas ce que je dois faire.
J’ai exactement procédé de la même manière qu’indiquer ci-dessus, j’ai fait plusieurs essais avec différentes entrées au menu correspondant et seuls les titres des sous-rubriques ou les titres d’articles apparaissent.
J’avais pensé retravailler le squelette du menu mais j’ai également 2 autres menus dans la page...
Peut-être ne suis-je pas très claire mais voici à peu près l’effet que j’aimerai avoir :
http://www.modeaparis.com/
Ce site est vraiment top !
Merci d’avance
je pense qu’à ce niveau il vaudrait mieux pour vous que vous fabriquiez vous même un squelette.
Votre problème n’est plus celui d’un menu (de navigation), et donc ce plugin ne vous sera pas utile.
quel est votre niveau de connaissance en html ? pour savoir comment je peux vous conseillez.
Bonjour et merci de votre réponse, je me débrouille pas trop mal en html. Mais je ne vois pas du tout comment m’y prendre... comment réaliser cet effet ? J’imagine avec javascript mais c’est là où mes connaissances me lâchent. Je ne sais pas comment intégrer correctement...
il faudrait que vous utiliser le plugin JqueryUI de SPIP qui vous permettra d’intégrer le script accordieon de JQuery.
Ensuite pour l’utilisation de ce script, allez ici : vous aurez une explication et des exemples http://jqueryui.com/demos/accordion/
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 : |