Pour en avoir eu besoin et longtemps cherché, je sais que les menus déroulants disponibles sous forme de plugins ne sont pas nombreux ;-) . Il y a bien celui-ci que j’ai essayé mais qui ne me satisfaisait pas vraiment...
J’ai donc intégré à mon site un menu simple et efficace que j’ai trouvé sur le net. Quelques clics plus tard, vous pouvez lire ces lignes et télécharger le plugin « Menu_babbibel ».
Il s’agit d’un menu déroulant s’appuyant sur la librairie jQuery et donc parfaitement compatible avec les versions récentes de spip ainsi que tous les navigateurs ou presque.
Le code étant très simple, le menu est facile à personnaliser. Les feuilles css sont commentées pour faciliter la personnalisation et l’habillage.
Merci à Denisb pour sa contribution base de données test.
Installation
Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html
- Le plugin fonctionne sur les squelettes disposant de la balise
#INSERT_HEAD.
-
Le plugin utilise CFG (version > 1.14.0) pour la configuration.Pour respecter les nouvelles spécifications et être compatible avec SPIP 3, j’ai choisi de ne plus maintenir la compatibilité avec les versions 1.9.2 de SPIP. Désormais, le menu babbibel se passe de CFG. Le lien vers la page de configuration est accessible aux websmestres dans les menus de l’interface privé.
- Pour les versions spip 2.x, le plugin SPIP-Bonux est nécessaire.
Mise en oeuvre
Pour faire apparaitre le menu dans votre squelette, placez-y le code [(#MODELE{menu}{env}{id_rubrique}{id_article})] là où vous souhaitez que le menu apparaisse. Ce menu convient à tous les sites. Il est capable d’identifier et trier les articles et rubriques par langue. La plupart des sites utilisera ce menu. N’hésitez pas à visualiser le résultat de votre configuration sur les pages tests.
Ceux qui ont configuré leur site avec un secteur par langue utiliseront plutôt [(#MODELE{secteur_langue}{env}{id_rubrique}{id_article})]. Ce menu dissimule les secteurs. Il n’affiche que les rubriques de niveau 2 en les regroupant par langue. Il permet donc de répondre aux besoins spécifiques des sites multilangues par secteur (Cf. http://www.spip.net/fr_article2124.html#nh1).
Paramétrage
Le menu déroulant de babbibel se configure en quelques clics. Il est possible de choisir :
- le type de menu que l’on souhaite utiliser (secteur + rubriques, secteur + articles, rubriques par mot clé, etc...)
- le nombre d’article à afficher dans le menu (seulement si on a choisi un menu qui affiche des articles évidement)
- l’ordre dans lequel ces articles seront affichés (ordre chronologique, alphabétique, etc)
Pour gérer plus finement le contenu du menu déroulant, vous avez la possibilité de sélectionner les rubriques qui seront les rubriques principales du menu ou d’exclure du menu des rubriques ou des articles.
Pour cela, créez un groupe de mots-clés pouvant être associés aux rubriques et aux articles. Dans ce groupe, créez les mots clés :
-
menu_derqui sélectionne une rubrique à afficher dans les menus de type "Rubriques par mots-clés". -
exclu_menu_derqui exclut du menu une rubrique et son contenu ou simplement un article. Ceux-ci ne seront exclus que du menu ! Attention toutefois à ne pas rendre inaccessible une partie de l’arborescence.
Personnalisation
Pour personnaliser l’apparence du menu, il suffit de modifier le fichier ./plugins/menu_babbibel/menu_babbi.css. Je vous conseille de faire appel à l’extension firebug de vos navigateurs favoris.
Si vous avez personnalisé l’apparence du menu, placer le menu_babbi.css dans le dossier squelettes de votre site. C’est cette css qui sera prioritaire et les mises à jour du plugin n’écraseront pas votre css personnalisée. (Merci à Prad pour l’idée judicieuse)
Les classes babbin et babbout permettent de personnaliser l’apparence de l’article et/ou la rubrique exposé.
Compatibilité
Le menu a été testé avec succès sur la plupart des navigateurs. Le menu reste fonctionnel même si le javascript est désactivé.
Fonctionnement
Pour vous éviter de chercher, j’apporte ici quelques précisions sur le comportement général du menu :
- Affichage des secteurs & des rubriques se fait toujours par :
- numéro de titre
- puis par date
- puis par ordre alphabétique
- Configuration par défaut
- Menu "Secteur >>> sous rubriques"
- 100 articles maximum seront affichés
- Les articles affichés le seront par date
- Inverser l’ordre du tri aléatoire NE SERT À RIEN ;-)
- Le premier item du menu ("accueil site") correspond à la valeur de
<:accueil_site:>du fichier de langue de spip. Il sera donc traduit dans toutes les langues supportées par SPIP et ce pour tous les types de menus.
Version 3.0.2
RSS 2.0
Vos commentaires
# Le 16 octobre 2015 à 16:02, par scargot
En réponse à : Le menu déroulant Babbibel
Bonjour,
Je suis débutant... Ce plugin semble exactement ce que je recherche. J’ai réussi à l’installer et le configurer pour voir l’exemple qui fonctionne.
Mais par contre je ne sais pas quoi faire pour le mettre en place sur mes pages ! J’ai bien le code [(#MODELEmenuenvid_rubriqueid_article)] qu’on me dit de placer , mais je ne sais pas où !?
Quelqu’un pourrait il m’expliquer la démarche ?
merci d’avance
Répondre à ce message
# Le 30 juillet 2015 à 22:08, par djimel
En réponse à : Le menu déroulant Babbibel
Bonjour, je suis sous spip 3.0.20.
Super plugin que ce babbibel !
J’ai réussi à le configurer et il est intégré dans mon header... mais je n’arrive pas à centrer ce menu (qui envoie 5 rubriques)...
Avez-vous une solution ?
Cdt
Répondre à ce message
# Le 16 mars 2015 à 11:41, par GibusM
En réponse à : Le menu déroulant Babbibel
Félicitation pour cet excellent plugin que j’utilise de longue date.
Avec l’arrivée de SPIP3 et du critère profondeur serait-il possible de limiter le nombre des niveaux affichés afin d’éviter d’avoir à positionner le mots clé « exclu_menu_der » sur nombre de rubriques et d’articles qui sont eux affichés à l’aide d’un second menu ?
J’ai fait, sans succès, des tentatives de modification du fichier « inc_menu_mot_cle3.html » en ajoutant profondeur<=2 dans les critères des boucles.
# Le 17 mars 2015 à 04:13, par GibusM
En réponse à : Le menu déroulant Babbibel
Grossière erreur !
Les droits sur le répertoire plugins/auto ne permettaient pas de transférer les fichiers du plugin modifié. Ce que je n’ai pas remarqué immédiatement.
La solution proposée fonctionne bien.
Répondre à ce message
# Le 12 novembre 2014 à 16:17, par Jean Christophe Villeneuve
En réponse à : Le menu déroulant Babbibel
je teste ce plugin et je confirme qu’il y a un souci avec les tablettes : le menu se déroule bien si on tape sur la rubrique de secteur mais ensuite, si on tape sur un des sous-menu, rien ne se passe et à l’arrivée on se retrouve sur la page rubrique du secteur.
Dommage car ce menu me paraissait fort intéressant pour un site responsive.!
Répondre à ce message
# Le 2 décembre 2013 à 18:56, par pierreva
En réponse à : Le menu déroulant Babbibel
Bonjour,
Je suis en train de tester le plugin avec la version 3.0.13 de Spip : le gestionnaire de plugins m’affiche : Menu babbibel 3.0.0 - stable
version incompatible
Merci pour votre aide !
Pierre V.
# Le 13 décembre 2013 à 11:05, par sirom
En réponse à : Le menu déroulant Babbibel
Bonjour,
Idem pour moi « version incompatible » avec spip 3.0.13
Que faire ?
# Le 13 décembre 2013 à 11:18, par sirom
En réponse à : Le menu déroulant Babbibel
j’ai trouvé : il y une erreur de frappe dans le fichier paquet.xml :
A la ligne 6
ll faut remplacer la parenthèse fermante par un crochet fermant , ce qui donne :
compatibilite="[1.9.2;3.0.*]"cordialement.
# Le 18 janvier 2014 à 16:26, par Ned
En réponse à : Le menu déroulant Babbibel
Merci merci merci pour le signalement de l’erreur dans le fichier paquet.xml !
# Le 27 janvier 2014 à 12:25, par obiwanriko
En réponse à : Le menu déroulant Babbibel
Ouch !!!! Grosse frayeur en mettant à jour ce plugin !!!! Spip 3.0.14 le lit comme incompatible et résultat tout le site est cassé... Obligé de faire un retour à la version précédente via FTP !!!
# Le 26 mars 2014 à 11:11, par spipienne
En réponse à : Le menu déroulant Babbibel
3 mois après la signalisation de cette erreur, pas de correction dans le fichier ??
# Le 19 août 2014 à 11:18, par isaweb
En réponse à : Le menu déroulant Babbibel
Ben non... C’est bien dommage.
# Le 17 octobre 2014 à 15:16, par Renée Picard
En réponse à : Le menu déroulant Babbibel
Merci
Sans ce forum je n’aurais jamais trouvé l’erreur.
Répondre à ce message
# Le 27 août 2014 à 18:52, par Karen
En réponse à : Le menu déroulant Babbibel
Bonjour,
Tout d’abord un grand merci pour cet excellent plugin, déjà testé sur un site, il est génial !
Je viens d’adapter son css pour un nouveau projet, afin d’avoir le sous menu en ligne, jusqu’ici, aucun problème.
Je voudrais pouvoir faire en sorte que le sous-menu reste affiché dans la rubrique en cours, un peu comme un fil d’ariane où l’on verrait toujours les autres éléments de menu de la rubrique concernée.
Je précise que j’utilise inc_menu_article.html (rubriques > articles) mais pourrait aussi bien le vouloir avec inc_menu_laur.html (rubriques > sous-rubriques). Peu importe, c’est sur le JS que ça se joue.
Mon problème est que je suis nulle en javascript, et je ne sais pas comment écrire toutes ces actions dans menu_babbi.js : le sous-menu apparaît au survol d’un élément de menu, reste quand on en sort, et ne disparaît que quand on survol un autre élément de menu, pour faire apparaître le sous-menu suivant…
Quelqu’un serait-il intéressé pour m’aider à avancer sur cette idée, qui peut-être intéressera d’autres personnes ?
Je peux donner fournir mon css si c’est utile…
Cordialement,
Karen
Répondre à ce message
# Le 2 avril 2014 à 16:10, par Nicole
En réponse à : Le menu déroulant Babbibel
Bonjour,
Comment faire pour compléter le bandeau du menu par des cases vides pour que ça prenne tout le bloc d’affichage ? j’ai essayé en remplissant des rubriques et articles vides mais çà ne marche pas !!
cf fichier joint pour voir ce que ça donne
Merci,
# Le 2 avril 2014 à 18:22, par Nicole
En réponse à : Le menu déroulant Babbibel
je me réponds à moi-même : (çà peut aider quelqu’un)
ajouter dans le fichier menu_babbi.css :
dans .nav
« background-color : #c1002a ;
width :970 px ;
height:25px ; »
...
Répondre à ce message
# Le 7 octobre 2013 à 12:30, par Le codeur masqué
En réponse à : Le menu déroulant Babbibel
Bonjour,
J’ai un soucis avec le menu Babbibel (très bon plug-in au passage) plutôt incompréhensible (pour moi du moins, et actuellement...)
Le menu fonctionne parfaitement en page d’accueil, se déroule parfaitement. Mais dans les pages articles et rubriques, s’il le premier niveau est bien affiché, il ne déroule absolument rien au survol de la souris.
Une solution à ce pépin ?
Merci par avance
# Le 18 janvier 2014 à 17:30, par Yann
En réponse à : Le menu déroulant Babbibel
Bonjour,
Vérifies que les header sont bien inclus dans les tous tes squelettes.
On ne sait jamais...
Répondre à ce message
# Le 14 juin 2013 à 23:04, par charly
En réponse à : Le menu déroulant Babbibel
Bonjour,
Un grand merci pour ce plugin !! :-)
le menu fonctionne trés bien toutefois
je cherche à modifier les couleurs des rubriques et sous rubriques indépendamment ex :
rubrique 1 : bleue
sous rubrique : bleue
rubrique 2 : jaune
sous rubrique 2 jaune
... etc
je suis sous spip 2.1.12
jutilise le plugin babibel dans sa version 2
rubrique>>sous rubrique
j’ai dans un premier temps essayer avec le plugin couleur rubrique de modifier le menu_babi.css, le inc_menu_laur.html et inc_menu dans le dossier norm du plugin.
cependant je suis un grand débutant du développement (que cela soit boucle ou CSS) je continue mes recherches cependant un petit coup de main serai le bienvenu.
De même si il y a une autre possibilité en modifiant d’autre fichier je suis preneur.
merci beaucoup
# Le 15 juin 2013 à 08:22, par Manu
En réponse à : Le menu déroulant Babbibel
Les CSS devraient permettre de réai-oudre assez facilement votre problème. Dans le squelette, rajouter dans les balises « li » une classe du type
<li class="maclasse#ID_RUBRIQUE">.....</li>.Ensuite, il suffit de style les li.maclasse1, li.maclasseXXX dans la feuille css pour leur mettre une valeur de background-color spécifique
# Le 15 juin 2013 à 09:12, par charly
En réponse à : Le menu déroulant Babbibel
bonjour,
dans un premier un grand merci pour ton aide,
j’essaye donc avec la syntaxe suivante :
fichier « menu_babbi.css »
#li.maclasse1{background-color:#ffffff;
}
et dans le fichier « inc_menu_laur.html » j’ai ajouté
"<li><a href="#URL_SITE_SPIP/" title="[(#NOM_SITE_SPIP|textebrut)]"><:accueil_site:> <class="maclasse#ID_RUBRIQUE"></a>
</li>"
ce que j’ai fais ne me semble pas fonctionner mais vu mon niveau de développement dur dur
encore merci pour ton aide
# Le 15 juin 2013 à 09:26, par Manu
En réponse à : Le menu déroulant Babbibel
li.maclasse1et non pas#li.maclasse1: pas de # devant (le # correspond à l’attribut id d’une balise (pour rappel, un id doit être unique dans une page) et là il s’agit d’une classe.Ensuite, j’ai écrit #ID_RUBRIQUE : bien sûr, ça ne fonctionne que s’il s’agit d’une boucle rubrique (à adapter si la boucle est différente)
# Le 15 juin 2013 à 11:17, par charly
En réponse à : Le menu déroulant Babbibel
ok, merci pour les infos je vais etudier tous ca. deplus je viens de trouver les articles expliquang le fonctionnement des boucles et balis sur spip.net .
je vous tient au courant.
# Le 15 juin 2013 à 22:35, par charly
En réponse à : Le menu déroulant Babbibel
bonsoir,
j’ai pris 4, 5 heure pour essayer de résoudre mon problème, sauf erreur,
je pense être sur la bonne voix bien que :
- déja je ne travaillai pas sur le bon fichier il s’agissait du fichier « inc_menu.html » dans le dossier « inc/norm » du plugin. j’ai donc inséré le code que vous m’avez fournit :
class="maclasse#ID_RUBRIQUE">ce qui donne :
<ul id="nav">
<li>
<a href="#URL_SITE_SPIP/" title="[(#NOM_SITE_SPIP|textebrut)]"><:accueil_site:></a>
</li>
<BOUCLE_menus_bab(RUBRIQUES){racine} {!titre_mot=exclu_menu_der}{lang}{par num titre, date, titre}>
<li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero|couper{80})]</a>
<div class="maclasse#ID_RUBRIQUE"></div>
<B_sous_menus_bab>
<ul>
<BOUCLE_sous_menus_bab(RUBRIQUES) {id_parent} {lang}{!titre_mot=exclu_menu_der}[{id_rubrique !IN (#CONFIG{babbi/rubriques_exclus})}]{par num titre, date, titre}>
<li><a href="#URL_RUBRIQUE">[(#TITRE|supprimer_numero|couper{80})]</a><BOUCLE_rec(BOUCLE_sous_menus_bab)></BOUCLE_rec></li>
</BOUCLE_sous_menus_bab>
</ul>
</B_sous_menus_bab>
</li>
</BOUCLE_menus_bab>
</ul>
quand j’affiche le code j’obtiens :
<ul id="nav"><li>
<a href="http://www.institutionsevigne.org/" title="Institution Sévigné - Primaire Collège Lycée Granville">Accueil du site</a>
</li>
<li><a href="spip.php?rubrique34">Présentation</a>
<div class="maclasse34"></div>
donc j’ai bien le retour de mon numéro de rubrique dans « maclasse ».
ce qui je suppose ne doit pas marcher est dans mon fichier « menu_babbi.css »
j’ai essayé plusieurs syntaxe comme :
maclasse11{
background-color:#3366FF;
}
maclasse31{
background:#3366FF;
}
maclasse50{
color:#3366FF;
}
maclasse46{
color:#:#3366FF;
}
maclasse42{
background:#3366FF;
}
si vous avez du temps, merci du coup de pouce
le site en question est -> la
# Le 19 juin 2013 à 07:16, par Manu
En réponse à : Le menu déroulant Babbibel
il faut un « . » devant les déclarations de classe :
.maclasse11{
background-color:#3366FF;
}
.maclasse31{
background:#3366FF;
}
etc..
RAPPEL CSS :
#truc{ ...} = > div id="truc".truc{ ...} = > class="truc"
truc{ ...} => balise html truc
Répondre à ce message
# Le 22 juillet 2012 à 12:01, par sirom
En réponse à : Le menu déroulant Babbibel
Bonjour,
je n’arrive pas à changer la couleur de la police en mode « exposé »
dans le CSS avec la classe
.babbin, je mets par exemple la propriétécolor:#000;et rien ne se passeest-ce normal ?
Merci
# Le 28 septembre 2012 à 14:54, par mirobolus
En réponse à : Le menu déroulant Babbibel
Pour ceux qui galèrent avec les classes .babbin et .babbout, il faut penser à inclure son menu en transmettant l’ID de la rubrique ou de l’article en cours.
Au lieu d’insérer son menu babbibel avec ceci :
[(#MODELE{menu})]il faut utiliser cette syntaxe :
[(#INCLURE{fond=inc/norm/#CONFIG{babbi/type_menu, inc_menu}}{id_rubrique})](en suivant les indications données dans Pour_modifier_le_menu.txt)
Et lorsque le menu est appelé lui-même depuis une noisette, il faut appeler cette noisette en transmettant aussi l’id_rubrique/id_article.
Exemple pour moi :
<INCLURE{fond=inclure/header}{id_rubrique}{id_article}>Çà aidera peut-être !
# Le 28 octobre 2012 à 16:22, par babbibel
En réponse à : Le menu déroulant Babbibel
Salut,
il faut effectivement bien penser à transmettre le contexte dans toutes les inclusions.
Utilisez cette noisette
[(#MODELE{menu}{env}{id_rubrique}{id_article})]pour insérer le menu et si vous l’insérer dans un fichier qui lui aussi est inclus, il faut aussi vérifier que le contexte lui est également transmis (présence de{env}ou{id_rubrique}{id_article}dans la noisette d’inclusion.A bientôt !
# Le 29 avril 2013 à 15:11, par sirom
En réponse à : Le menu déroulant Babbibel
Bonjour,
Je reviens un peu tard sur ce sujet, mais malgré vos explications je n’arrive toujours pas à exposer autrement que par « l’italique » qui est le comportement de base dans la classe babbin.
Ne peux ton pas exposer avec une couleur de fond par exemple (qui serait beaucoup plus visible pour l’utilisateur...) ?... ce que j’ai essayé sans succès !
mon menu est bien appelé par
[(#MODELE{menu}{env}{id_rubrique}{id_article})]Bref je sèche sévère, si quelq’un à une piste, je suis preneur !
Cordialement.
# Le 29 avril 2013 à 15:59, par mirobolus
En réponse à : Le menu déroulant Babbibel
Bonjour sirom,
As-tu bien modifié les 2 règles .babbin et .babbout du fichier menu_babbi.css du plugin ? Pense à copier ce fichier à la racine de ton dossier squelettes/ pour pouvoir le personnaliser.
Avec le contexte transmis comme tu le fais, il ne devrait pas y avoir de problème, à moins que tu n’aies un conflit entre deux règles css. Sinon, essaie d’ajouter la propriété !important à ton background-color, pour voir.
Ou donne-nous un lien si tu peux.
Bon courage
# Le 29 avril 2013 à 16:28, par sirom
En réponse à : Le menu déroulant Babbibel
Merci Mirobolus !
J’avais effectivement un conflit avec le background.
Avec le paramètre !important cela fonctionne !
Par contre du coup j’essaie avec un border-bottom : 5px solid #93C ;
et bizarre rien ne s’affiche... pourtant apparemment pas de conflit.
Bon pour l’instant je me contente de mon background-color, ce qui était le sujet de ma question précédente.
Encore merci pour l’éclairage !
Cordialement.
Répondre à ce message