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

  • 1

    Salut Babbibel, tout d’abord ton menu est super bien fait je te felicite pour ton savoir faire. Serait il possible de mettre en telechargement le fichier menu_babbi.css du site le cri du peuple s’il te plait car je n’arrive pas a obtenir les bon reglages sur certain paramettre de transparence.

    je te remercie d’avance.

    • ha nan c bon j’ai trouvé comment faire vue que le css vas dans le temp de internet merci quand meme :p

    Répondre à ce message

  • 1

    Bonjour, quels fichiers du plugin faut-il modifier pour que le menu déroulant affiche plus que dix des derniers articles ? Le menu en mode inc-menu-articles ne semble pas vouloir afficher plus de huit articles dans les ruriques racines.

    • Il faut modifier la boucle du inc-menu-articles avec le critère {0,10} évidemment. En {0,20} par exemple.

    Répondre à ce message

  • mc

    J’ai essayé d’inclure la ligne dans inc-entete.html, sommaire.html. Rien. Le plugin ne fonctionne à priori pas avec EVA 4. Si quelqu’un à des idées, je prends.

    Répondre à ce message

  • 2
    Gaelle

    Bravo, ce plugin répond à un vrai besoin, que j’avais satisfait partiellement et avec pas mal de complications autrement !
    Seul bémol : si une rubrique de la racine ne contient que des articles, ils ne s’affichent pas. Ou alors je n’ai pas bien compris.

    J’ai placé le code : <INCLURE{fond=inc-menu}>

    Merci de votre éclairage et MERCI pour ce plugin :)

    • Briant

      Salut Gaelle,

      Aucun bémol à ce plugin (pour l’instant...). C’est comme à l’école : il faut juste lire la consigne pour comprendre ce qu’il y a à faire.

      Plus sérieusement, il y a plusieurs menus à insérer. Si tu insères le code <INCLUREfond=inc-menu-articles>, ou <INCLUREfond=inc-menu-laur> tu obtiendras sans doute ce que tu veux...

    • Gaelle

      Merci... Effectivement : CQFD ;-)
      Cela fonctionne parfaitement bien ! Bravo et encore Merci !

    Répondre à ce message

  • 1
    mc

    Je débute avec SPIP. J’utilise EVA 4 pour le squelette et je voudrais utiliser le menu déroulant. Quelqu’un peut il m’aider : dans quel(s) fichier(s) html doit on inclure la ligne de code ?

    • Rizzi

      à MC : Je n’y connais pas grand chose mais si ton site montre sur presque toutes ses pages un cartouche d’en-tête (avec le titre du site par exemple), tu peux mettre « [<]INCLURE[accolade]fond=inc-menu-laur[accolade][>] » dans le fichier inc-entete.html.

    Répondre à ce message

  • 2
    Rizzi

    Excellent !! Je cherche quelque chose comme ça depuis que je suis tout petit sur Spip (et je le suis encore) ;-)

    Le plugin me plaisait et les remarques de Laurence étaient exactement ce que je souhaitais : ça fait quelques jours que j’observe vos « joutes » verbales et que j’avais hâte que ça aboutisse !!

    Je viens de le mettre sur un site à décorer intégralement : beau bond en avant ;-)

    Par contre, je l’ai mis dans le inc-entête et j’ai un petit soucis :

    quand la largeur d’écran est trop petite, les catégories s’affichent sur plusieurs lignes (ça, c’est bien), par contre les menus déroulants de la première ligne se superposent aux suivantes mais en étant en dessous : ainsi il n’y a plus moyen d’y accéder : le premier article est caché par la deuxième ligne de catégories, et en passant sur cette deuxième ligne, le menu se ferme donc on ne peut accéder non plus aux articles suivants.

    Le même phénomène se passe avec des blocs en « float » dans le « body » (dans mon cas le menu rubrique qui traine sur la gauche de mon site) : les menus déroulent sous le bloc... on ne les voit pas.

    Que dois-je faire pour éviter cela ? Merci d’avance ;-)

    Autrement, j’ai centré l’affichage de la ligne des catégories en mettant ça (dans menu_babbi.css) :

    #nav, #nav ul

    /* margin:0 ;
    padding:0 ; */

    margin-left : auto ;

    margin-right : auto ;

    width : 80% ;

    J’ai bien fait ou il y a mieux ?

    le résultat sur ce site : http://lanesterhandloisir.free.fr

    • babbibel

      Hello Rizzi, et merci à Laurence puisque c’est elle qui avait raison.

      Concernant la mise en page, j’aurais plutôt mis quelquechose comme ça :

      #nav, #nav ul
{
    margin : 0 auto 0 auto;
    padding: 0 ;
    width : 80% ;
}

      Le problème du sous-menu caché sous la 2e ligne de menu peut être résolu en augmentant le z-index du nav ul. Mais je n’ai pas pu le reproduire ce souci.... Le mieux ça reste quand même d’avoir 1 seule ligne de menu me semble t’il... ;-) Mais Laurence l’a prouvé... je peux me tromper.

    • Rizzi

      à Babbibel :

      J’étais intrigué par ta réponse alors j’ai regardé de plus près :

      -  avec Firefox, je n’ai pas les soucis de superposition que je décris dans le post précédent (par contre, ma déco est pire que tout dans ce navigateur, ça craint :-s mais ça n’a rien à voir avec ton plugin tip-top)

      -  avec internet explorer 8, si mon site ressemble plus à quelque chose, c’est avec ce navigateur que les soucis de superposition décrits sont présents

    Répondre à ce message

  • 10

    Bonjour,
    Je viens d’installer votre plugin, tout d’abord bravo !
    Mais comment faire pour déplier également les articles, et ne pas se limiter aux rubriques, sous rubriques...?
    Merci d’avance
    Laurence

    • babbibel

      Salut,

      Un menu déroulant qui affiche les articles sera livré dans la version 1.1 du plugin qui sortira sans doute ce weekend.

      À dimanche...

    • Bonsoir,
      Je n’arrive toujours pas à faire apparaitre les articles (après rub et sous rub), quand pensez vous mettre en ligne la version 1.1, qui correspondrait tout à fait à ce que je souhaite.
      Merci d’avance
      Laurence

    • babbibel

      Bonsoir,

      La nouvelle version du menu Babbibel est en ligne avec 1 jour de retard. Apparemment certain(e)s ont eu le temps de s’impatienter... ;-)

      Attention ! Cette version permet d’afficher uniquement les rubriques situées sous la racine avec les articles qu’elles contiennent.

      Je ne suis pas sûr que ce soit exactement ce que Laurence attendait... Veux-tu bien me fournir l’adresse de ton site stp. J’aimerais mieux comprendre ton besoin pour te proposer une solution « qui correspondrait tout à fait à ce que [tu] souhaites » parce que ton site à l’air d’avoir une arborescence plutôt bizarre...

    • Bonjour ’Babbibel’ !
      On s’impatiente quand on porte intêret... :-) !!
      Je n’ai pas d’arborescence ’exotique’, simplement Rubriques, Sous Rubriques et Articles
      Je souhaite simplement que le menu déplie cette arboresence
      2 cas possibles :
      a) soit des articles directement dans les rubriques
      b) soit des articles dans des sous rubiques (quand il y a de nombreux articles)
      Pour ce qui est de la mise à jour 1.1, elle ne déplie pas l’arborescence dans le cas b
      Je ne peux malheureusement pas vous donner un adresse, je suis encore en local
      Merci pour vos réponses rapides !
      Laurence

    • babbibel

      Hello Laurence, je l’admets... tu as bien raison, et l’impatience des spipeurs me flatte bcp... ;-)

      Bon, je vais faire un petit bout de code juste pour les impatient(e)s même si je ne suis pas convaincu par la pertinence du besoin.
      Pour info, est il possible qu’une rubrique contienne à la fois des articles et des sous rubriques ?

    • Hello !
      Heuuu.... cela serait l’idéal si une rubrique pouvait contenir une rubrique et des articles !!
      A bientôt !
      Laurence

    • babbibel

      Re,

      Et voilà ! Menu Babbibel v1.2.0 RC en document joint !

      Je ne l’ai pas vraiment testé alors j’attends un retour d’expérience...

      Merci d’avance. @+

    • Bonjour,
      Je viens de tester la v1.2.0 RC, les sous rubriques et les articles contenus dans celles ci sont bien visibles.
      Par contre, les articles contenues dans les rubriques (de 1er niveau) ne sont pas dépliés...
      Mais ça avance, le but est proche !!
      A tout à l’heure sans doute !
      Laurence

    • babbibel

      Hello,

      Après plusieurs fausses joies, il me semble que l’on ne doit pas être loin du compte...

      Version 1.2.2 RC en ligne. J’attends les retours.

      La pensée du jour :

      Quand on n’est pas doué, il faut être persévérant...

    • Hello !
      Alors là, BRAVO !!!!
      Je pense que ce menu peut être utile pour bon nombre de sites !
      Encore merci pour les modifications apportées.
      Je communiquerai l’adresse du site une fois celui ci en ligne.
      Merci encore
      Laurence

    Répondre à ce message

  • Jospeh Tux

    Bonjour,

    je fais parti des impatients, encore discret jusqu’à ce jour.

    L’intérêt d’arriver directement à un article sans passer par la case rubrique me semble évident ( gain de temps ). Quand à une arborescence avec divers niveaux de sous-rubriques, c’est aussi une fonctionnalité qui apparaît nécessaire lorsqu’un site de documentation ou d’inforamation « gonfle », et qui permet justement d’afficher une liste pas trop longue (facilement/rapidement accessible ) d’articles dans un tel menu.

    Merci (et bravo ) donc pour votre travail, que j’utiliserai peut-être bientôt.

    Répondre à ce message

  • 1
    popojcb

    Bonjour,
    Je viens de mettre le nez dans ce plug-in vraiment pratique.

    Toutefois, lorsque le menu se déroule, il disparait derrière une smoothgalery, ce qui le rend du coup obselète. J’ai bien essayé des z-index sans succès.

    Pire la smoothgalery désactive les effet de ce plug-in. Dans le cas de IE6 la smoothgallerie le rend inopérant.
    Les deux plugins doivent appeler la même fonction ?

    Dommage !

    A moins que quelqu’un ai une idée ?

    Répondre à ce message

  • kaliste

    Bonjour
    Super ce menu en démonstration
    En ce qui me concerne, je n’arrive pas à la faire fonctionner sur mon site
    En fait le menu apparait, mais pas les sous-rubriques ou articles lorsque l’on se positionne dessus
    Petite précision, je suis sous SPIP 2.0.7 et j’utilise le squelette The Morning After
    Quelqu’un a t’il une solution au problème
    Merci d’avance

    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