Le menu déroulant Babbibel

Un menu déroulant horizontal en jQuery sans limitation de profondeur et configurable.

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.

Menu babbibel
Site de test fourni par Denisb

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 :

  1. menu_der qui sélectionne une rubrique à afficher dans les menus de type « Rubriques par mots-clés ».
  2. 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 :
    1. numéro de titre
    2. puis par date
    3. 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.

2 Juin 2009 : Mise à jour de l’archive Menu_babbibel V 1.0 stable
29 Juin 2009 : Mise à jour de l’archive Menu_babbibel V 1.1.0 stable
3 Juillet 2009 : Mise à jour de l’archive Menu_babbibel V 1.3.0 stable
12 Août 2009 : Mise à jour de l’archive Menu_babbibel V 1.9.9 test
17 Août 2009 : Plublication de 2 archives Menu_babbibel V 2.0 stable pour SPIP 2 et SPIP 192
25 Août 2009 : Plublication de l’archive Menu_babbibel V 2.0a stable pour SPIP 2 et SPIP 192


Depuis le 28 Août 2009 : Plublication de l’archive Menu_babbibel depuis la spip_zone

Discussion

153 discussions

  • 1
    Le codeur masqué

    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

  • 6

    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 »

      #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

    • 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 :

      <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

    • 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

  • 5

    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 passe
    est-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

  • 1

    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.

    • Etienne

      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

  • 3

    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 :

      1. la couleur de fond du menu se trouve ligne 33
      2. la couleur de fond des sous-menus se trouve ligne 63.

      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

  • 1

    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

    Répondre à ce message

  • 1

    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

  • 2

    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 »

      • d’installer et d’activer le plugin menus ET le plugin menu déroulant Babbibel ;
      • de saisir la classe 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

  • 2

    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 :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom