Le menu déroulant Babbibel

Publié le : 2 juin 2009 – Dernière modification le 21 décembre 2021 – par babbibel – 394 commentaires

1
2
3
4
5
84 votes
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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

153 discussions

  • 5
    Elijaah

    Bonjour,

    D’abord je vous remercie pour la contrib effectivement un menu deroulant cle en main c’est noël !

    J’utilise le menu Babbibel sur le site http://production.absynthe.fr/ et je cherche à changer l’ordre des rubriques, qui sont les titres de la barre de navigation déroulante, menant aux articles.
    Le menu de gauche affiche les rubriques par num titre, et apparement le menu déroulant est aussi censé afficher ces rubriques par num titre.
    Or, mes deux emnus ne s’affichent absolument pas dans le meme ordre.
    J’ai bien tenté de modifier les fichiers inc-menu etc.. sans succès, ça ne changeait strictement rien à l’affichage.
    Voili voilou, si je pouvais avoir une piste sur comment régler ça je vous en remercie d’avance.

    • babbibel

      Hello,
      D’abord, quel type de menu utilises tu ?
      En jetant un oeil sur ta config, j’ai remarqué que le code du menu Secteur>>>sous-rubrique classe les secteurs par date.

      Si c’est ce menu que tu utilises tu dois corriger le fichier
      ./plugins/menu_babbibel/inc/norm/inc_menu.html
      et rajouer le critère {par num titre} .

    • Elijaah

      ’Soir,

      Et merci pour cette réactivité :)
      En fait j’utilise Secteurs>>Articles
      Et c’est le fichier que tu cites que j’ai modifié les critères, moultes fois mais en vain, ça ne change point ...
      ouin ?

    • Elijaah

      Ah oui, et j’en profite pour te poser une autre question :
      Saurais tu par hasard quelle fonction je dois modifier dans la bibli jquery afin de ralentir l’animation du menu ?

    • babbibel

      Si tu utilise menu>>>Article c’est /plugins/menu_babbibel/inc/norm/inc_menu_articles.html que tu dois modifier. Je te laisse tester...

      Sinon, pour ralentir l’animation modifies le fichier /plugins/menu_babbibel/js/menu_babbi.js .

    • Elijaah

      Oh Yeah :)
      Tu roxes !

    Répondre à ce message

  • 1
    ludovic

    bonjour,
    Comment faire pour qu’un article soit affiché dans le menu avec le mot cle « menu_der ».
    Exemple afficher l’article CONTACT contenu dans une rubrique GENERAL que l’on ne veut pas afficher

    Merci d’avance

    • babbibel

      Salut,

      Ce n’est pas possible simplement. Il faudrait rajouter dans le code une boucle qui affiche spécifiquement cet article... Mais ce n’est pas paramétrable...

      Jettes un oeil au plugin menu de Rastapopoulos pour ce type de menu...

      @+

    Répondre à ce message

  • 8
    ben

    Bonjour,

    Bon, on va certainement dire que je chipote ;)

    J’essaye de passer mon site en W3C et je suis tombé sur un os.
    En utilisant « exclu_menu_der », cela créé une erreur du type « end tag for « ul » which is not finished ».
    J’essaye de réparer ça, mais c’est pas gagné... Il faut dire que je suis pas super balèze en code.
    Je pense qu’avoir un « ul » vide, au lieu de pas du tout est le problème.
    Je continue à creuser, mais si quelqu’un-e à un idée...
    Merci pour ce plugin en tout cas !
    Le site

    • babbibel

      Hello, il y a effectivement un truc qui cloche... Dis moi quel type de menu tu utilises et je regarde aussi...

    • ben

      Merci, sinon, j’y retourne Lundi.

    • babbibel

      Et sinon... Quel type de menu utilises tu ?

    • ben

      J’utilise le Secteurs>>>>sous rubriques + articles avec le mot clé « exclu_menu_der »

      Pour la validation W3C du site, il indique aussi une double définition de l’id nav, mais ça ne vient pas du plugin (Je dis ça au cas où tu l’aurais passé au W3C validator ;) ), faut que je mette le « id nav » de zpip en commentaire.

      Merci

    • ben

      Bon, bah échec...
      Je tourne autour, mais, ça veut pas passer...

      Sniff

    • babbibel

      Hello,

      J’ai fait la modification.
      Attends que le nouveau ZIP soit généré et télécharge la mise à jour. Révision 36769
      N’oublies pas de sauvegarder ton css... Et tiens moi au courant...

      @++

    • ben

      Je vais faire les modifs à l’asso (Wouhou !! Le site sera valide CSS et W3C !)
      Bon, bah, je tournais bien autour du pot, mais j’ai pas fait au bon endroit... ;)
      Merci pour ta réactivité !

    • ben

      Ça y est, c’est testé et ça marche nickel !

    Répondre à ce message

  • 1
    ciline

    salut les spipeurs je veux utiliser un menu horizonale dans mon site spip j’utilise spip 2.0.10 et le squelette eva web 4
    ou je dois placé -y le code [(#MODELEmenu)] Pour faire apparaitre le menu dans tous les page de mon site
    je suis pas bonne en programmation
    et merci a l’avance,

    • Petitbugle

      Le plus simple que j’aie trouvé est de le mettre dans un inc-rubriques.html à la place du menu standard de Spip. Tu mets ce fichier dans ton répertoire squelettes et ça doit marcher car ce fichier est inclus dans la plupart des squelettes de pages (article, rubrique, sommaire, plan, etc.). Je ne connais pas le squelette eva web 4, vérifie quand même que ça ne perturbe pas autre chose.

      Le positionnement correct, lui, se fait par les feuilles de styles.

    Répondre à ce message

  • 1
    fds

    J’utilise sous le menu un diaporama en jquery et le menu sous ie6 et ie7 passe sous les images :( donc impossible de le sélectionner. Une idée ? J’ai modifié les z-index mais rien à faire

    Répondre à ce message

  • 1

    comment gérer le contenu du menu déroulant j’utilise spip 2.010 et eva spip j’ai installée ce plugin avec le plugin eva bonus j’ai crée un groupe de mots-clés associés aux rubriques et dans ce groupe, j’ai crée le mots clés :
    ’exclu_menu_der’ qui exclut du menu une rubrique et son contenu mais toujours les memes rubriques apparaissent dans le menu de navigation gauche et le menu horizontale !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!que je dois faire

    • Pour commencer, tu pourrais mettre encore plus de points d’exclamation dans ton message, car ça donne envie de t’aider...

      Ensuite, les explications que tu donnes ne sont pas très claires. Je ne comprend pas ton problème en fait... Je ne peux donc pas t’aider.

      PS : Bonjour quand même

    Répondre à ce message

  • Xiongmao

    bonjours , je souhait rajouter dans mon menu babbybel un lien vers mon forum phpBB

    j’ai donc rajouté les lignes

    </BOUCLE_lang>
<li>
<a href="URL DE MON FORUM">FORUM</a>
</li>

    dans les fichiers inc_menu.html des dossiers , « \menu_babbibel\inc\multi » et « \menu_babbibel\inc\norm ». Mais cela ne fonctionne pas.
    est-ce que j’ai oublier de faire quelque chose ?

    Merci par avance

    Répondre à ce message

  • 1138

    Bonjour.

    Merci beaucoup pour ce plugin pour lequel je me permets un petit retour.

    Je développe un site multilingue (une langue principale avec d’éventuelles traductions d’articles ; « Forcer la langue » activé dans le couteau suisse). Or, avec Babbibel, seul « Accueil du site » apparait lorsque j’utilise le site dans une langue secondaire.

    Pour que ça fonctionne dans toutes les langues, j’ai dû enlever les critères {lang} dans /plugins/menu_babbibel/inc/norm/inc_menu.html

    En passant, j’ai remarqué la présence du critère {doublons A}. Ne faudrait-il pas systématiquement changer le A en quelque chose de moins courant, tel babbibel, histoire qu’il n’interfèrent pas avec d’autres doublons ?

    Répondre à ce message

  • Bonjour,

    Félicitations pour cette contrib.

    Je rencontre un petit soucis d’ergonomie, je ne sais pas si c’est lié à la contrib où à une autre configuration de mon site cependant...

    Le menu s’affiche parfaitement, le déroulant se fait très bien, mais quand je clique sur la rubrique cela m’affiche encore une fois une hierarchie au lieu de m’afficher l’article concerné...

    Etant débutante sous Spip, j’ai quelques difficultés à résoudre cela.

    Seriez-vous en mesure de m’aider ?

    Cordialement, et avec mes meilleurs voeux.
    EB.

    Répondre à ce message

  • rcaron

    Alors que j’ai pu installer sans problème sur un site ( http://centre-lecture.com/loisirs ) lorsque j’essaie sur un autre site (avec squelette identique), j’ai un affichage que je ne peux régler :

    -  Retours à la ligne des intitulés
    -  Superposition des sous-menus

    Bref, je n’y comprends rien de rien...

    Une piste pour Noël ?

    Merci

    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