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. https://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. https://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_der
qui sélectionne une rubrique à afficher dans les menus de type « Rubriques par mots-clés ». -
exclu_menu_der
qui 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.
Discussions par date d’activité
153 discussions
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
Bonjour,
Vérifies que les header sont bien inclus dans les tous tes squelettes.
On ne sait jamais...
Répondre à ce message
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
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
bonjour,
dans un premier un grand merci pour ton aide,
j’essaye donc avec la syntaxe suivante :
fichier « menu_babbi.css »
et dans le fichier « inc_menu_laur.html » j’ai ajouté
ce que j’ai fais ne me semble pas fonctionner mais vu mon niveau de développement dur dur
encore merci pour ton aide
li.maclasse1
et 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)
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.
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 :
quand j’affiche le code j’obtiens :
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 :
si vous avez du temps, merci du coup de pouce
le site en question est -> la
il faut un « . » devant les déclarations de classe :
RAPPEL CSS :
Répondre à ce message
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
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 !
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 !
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.
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
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
Bonjour,
Ce menu ce déroule vers la droite de l’écran. Est-il possible d’en changer le sens ?
Est-il possible aussi d’obtenir un sens « automatique », c’est à dire que le déroulement change de sens lorsque le menu atteint le bord de l’écran ?
Répondre à ce message
Bonjour,
Y a t-il un moyen de ne pas faire apparaître le titre de la rubrique mais son logo, dans le menu ? je me galère un peu avec ça.
merci d’avance.
J’ai trouvé : fichier inc_menu dans /inc/norm
Encore quelques trucs à régler et je devrais m’en sortir avec ce plugin. merci
Répondre à ce message
Bonjour,
Après avoir lu l’ensemble des commentaires, je n’ai pas trouvé d’éléments qui m’aident pour les problèmes suivants sur le site que j’anime :
Comment faire pour mettre les rubriques dans une couleur différente de celle des articles, dans le menu avec Babbibel ?
Comment faire pour classer dans une même rubrique les articles et les sous-rubriques ensemble ? En numérotant les sous-rubriques je parviens à les classer mais quand je numérote aussi les articles, ils ne sont pas classés avec les sous-rubriques.
Merci en tout cas pour ce plugin qui m’est indispensable depuis déjà pas mal de temps,
Cordialement,
Guillaume
Bonjour,
la feuille de style
menu_babbi.css
est commentée. Tu y découvriras que :Le classement des items ne permet pas de mélanger des objets de type différents. Toutes les rubriques apparaîtront avant les articles qui s’afficheront selon le critère de tri sélectionné dans la page de configuration du plugin.
Voir les explications ci-dessus...
Merci beaucoup pour la réponse.
Ton propos, babbibel, me confirme l’impossibilité de dissocier les articles et les rubriques (dans le même menu ou le même sous-menu) par des couleurs différentes.
De même pour le classement.
Ma seule idée (que je vais déployer sur le site) est d’introduire en fin de ligne un symbole : ►
Ce qui permettra peut-être aux utilisateurs du site de comprendre qu’il s’agit d’une rubrique comprenant des articles (et/ou des rubriques) et non d’un article.
Merci encore pour les explications.
Hello,
sinon tu peux essayer couleur rubrique mais il faudra modifier un peu le code du plugin...
Répondre à ce message
Bonjour,
j’utilise le menu babbibel sur ce site
Utilisant un ipad pour la première fois hier, j’ai remarqué qu’il est impossible de dérouler les sous-menu par « survol » de la souris !
comment faire alors pour que ce menu soit exploitable sur tablette ?
merci
Salut,
le menu est fonctionnel sur tablette et smartphone. Regardes http://www.mjcgex.fr/ par exemple...
Tu as sans doute fais une modification malheureuse du js...
Bon courage.
Répondre à ce message
Bonjour,
Est-il possible de placer le menu déroulant Babbibel à l’intérieur d’une rubrique, et non pas sur la page d’accueil, pour qu’il emmène les visiteurs vers des articles contenus dans cette rubrique ?
Bonjour,
Le plus simple serait de modifier le code du plugin. Sinon, essaies d’utiliser le plugin menu pour créer le menu que tu as imaginé et intègres le dans le squelette de ta page
rubrique.html
.Comme je le disais quelques postes plus bas ça devrait fonctionner.
Bon courage.
Répondre à ce message
Salut
Dis on peut rajouter un sélecteur « groupe de mots >> mots clef » ? j’ai fais comme ça sur un site et ça manque dans ta configuration je pense.
Salut,
C’est bien possible mais depuis la publication du plugin Menus, je ne vois plus aucune raison d’ajouter des fonctionnalités au menu déroulant Babbibel puisqu’en quelques clics on peut configurer le menu de ses rêves avec « Menus ». Il ne reste plus ensuite qu’à l’habiller en menu déroulant. Et le tour est joué.
Pour les moins à leur aise html, css, js (mais pas malhabiles pour autant), il « suffit »
nav
dans le champ Classes CSS de configuration du « plugin menus »Ça devrait suffire à déguiser votre menu personnalisé en menu déroulant. Quelques ajustement de
menu_babbi.css
peuvent s’avérer nécessaires mais ce n’est vraiment pas le plus difficile...Bonjour
Effectivement, j’avais pas pensés à monter les 2 plugins en même temps.
Je te ferais un retour la dessus à l’occasion.
Répondre à ce message
Bonjour
sur spip 3.0.4 le menu pour 2 secteurs fonctionne bien sauf sur la deuxième langue...il ne m’affiche pas les sous rubriques dans le deuxième secteur (anglais) que pourtant il m’affiche en français :(
Les 2 secteurs sont les mêmes (articles publiés dans les rubriques respectives...)
Ca proviens d’ou ??
jajoute qu’en effet ce ne sont pas les sous rubriques qui ne s’affichent pas (car le site en as pas) mais les articles (le plugin est configuré secteurs->sous-rub->articles
jai trouvé le problème ! ca pourra servir à d’autres personnes !
Les articles en anglais , ne sais pour quelle raison étaient en français....
c’est donc tout bon, désolé pour 3 messages...
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 : |