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

  • Bonjour à tous,

    Merci pour cette contrib dont la valeur n’est plus à démontrer :).

    Comme quelques-un je pense, je souhaiterais adapter ce menu déroulant de façon verticale.

    Il me manque peut-être pas grand chose, Je n’arrive pas à superposer les rubriques les unes en dessous des autres dans ma div « navigation ». En effet, par défaut elles s’alignent les unes à la suite des autres pour encombrer l’espace horizontal de la div.

    N’étant pas (encore !) un expert en css, j’apprends tous les jours mais là, je bloque. J’ai déjà réussi à indenter les sous-rubriques (titres d’articles en ce qui me concerne ) à droite en dessous de la rubrique survolée en jouant sur la margin-left de .nav ul ...

    Sauf erreur, j’ai fait une recherche avec le mot « vertical » dans toutes les pages du forum, sans grand succès (peu de threads en parlent ou restent sans réponses)

    Un grand merci.

    Répondre à ce message

  • 14

    bonjour,

    j’ai installé le menu babibel avec le squelette e-color (qui n est qu’un habillage de la dist). et j’ai un probleme d’affichage sous IE. le menu se déroule derrière les textes et images de mes articles. J’ai bien essayé de modifier les z-index.. et lu pas mal de choses un peu partout mais je n’arrive pas à trouver.
    quelqu’un peut il m’aider ?

    merci

    • personne n’a une solution ?

      voici le lien pour voir le pb (sous ie) : http://www.echecsoyeplage.fr/

    • je cherche toujours. J’ai essayé de placer des z-index dans les feuilles css de spip. Comme je ne suis pas un pro, je fais ça un peu au hasard car je ne maitrise pas. Un résultat a marché. je crois (d’après mes souvenirs car j ai essayé plein de trucs) que c’était en le rajoutant dans

      . Le menu passait alors devant les images. Malheureusement, ça me changeait la disposition de ma page (qui s’affichait plus large...)

      donc apparemment, il faudrait intervenir non pas sur babbibel (car pour moi ça ne marche pas) mais sur le reste. Si un pro des css passe par là...

      merci

    • Hello,

      je ne vois pas ce qui ne va pas sur ton site. Le menu passe derrière quelles images ? J’ai regardé sur plusieurs navigateurs pourtant.

      Quelle version du plugin utilises-tu ?

    • Hello,

      je ne vois pas ce qui ne va pas sur ton site. Le menu passe derrière quelles images ? J’ai regardé sur plusieurs navigateurs pourtant.

      Quelle version du plugin utilises-tu ?

    • hello babbibel

      personnellement, je n’avais pas de problème car j’utilise firefox. Mais des gars du club avait un pb en utilisant IE. Je teste donc sur IE et effectivement le menu passe sous les images... et puis je vois ta copie d’écran. Un doute m’assaille. Comme je ne m’en sers jamais j’avais la version 7 d’IE.... je télécharge donc le version 8. Et là plus de pb ! va comprendre charles.

      désolé pour le dérangement ( en espérant que ça ne buggue pas pour la version 9)

      et merci pour la réponse (quand je pense que j’ai passé 2-3 heures là dessus)

    • Je confirme le problème sur IE7. Les déroulants passent derrières les images du site. Et cela malgré un z index monté à 999.

    • Pour résoudre ce souci, les z-index doivent être accompagnés d’une position:relative sur #nav li ul a . A défaut, d’autres objets en position relative présent dans la page passeraient au-dessus des blocks déroulants.

    • Merci Artlogic... Je n’ai pas testé mais je te fais confiance sur ce coup là... J’ai mis à jour la css...
      @++

    • Hello

      Je confirme divers bugs ou affichages loin d’être très esthétiques à l’ouverture de la page. Les déroulants de ce menu se cachent après que la page soit entièrement chargée par le navigateur. C’est assez ...moche. Dans une page le css est bien souvent chargé avant le javascript. J’ai mis ce menu sur http://www.art-logic.info pour test. Je vais essayé de l’améliorer. A défaut de possibilité d’améliorations ...je le vire. :)

    • Hello,

      Il va vraiment falloir que j’installe windows pour corriger tout ça...

      Si tu trouves des solutions, je te remercie de bien vouloir les partager. Je cherche de mon côté et commit ce que je trouve...

      @++

      PS : Jolie personnalisation...

    • Hello,

      Je ne sais plus s’il y était ou pas, j’ai fortement modifié le fichier css. Néanmoins il me manquait un visibility:hyden sur le « #nav li ul » . Ca fonctionne déjà mieux sous IE6

    • Hello, merci de contribuer,
      il n’y a pas de visibility: hidden dans la css de l’archive mais c’est normal puisque le display: none suffit...

      @Artlogic : Je viens de regarder ton lien et les sous-menus apparents au chargement de la page se produisent aussi avec Firefox. Ce n’est donc pas un problème dû à tel ou tel navigateur. Or, je n’ai constaté ce problème sur aucun site avant le tien (tout navigateur confondu).
      Avec l’aide de firebug, j’ai remarqué que tu avais beaucoup (et joliment) personnalisé la css (les display: none ont complètement disparu par exemple). J’ai envie de penser que c’est pour cela que ton menu fait des trucs bizarre. (mais au moins il est très beau...)

    • Hello,

      Oui et non, de mémoire, le javascript force à visibility et non pas le display. C’est pour cela que j’ai supprimé le display puis remplacé par un visibility dans le css.

    • web@j.acqu.es

      Bonjour à tou/te/s,
      évidemment j’ai le même problème que vous avec IE7 : le menu passe sous les autres éléments de la page.
      J’ai trouvé une feinte : il s’agit de n’insérer l’appel du menu [(#MODELE{menu})] qu’à la toute fin du code HTML et de le mettre en place par un positionnement absolu :

      #lpaj_menu_horiz{
      	position: absolute;
      	left: 40px;
      	top: 154px;
      }

      Du coup pour IE7 le menu est posé par dessus tout le reste du code. Pour les autres navigateurs, ça ne change rien.

      Rappel : le positionnement absolu permet de donner les coordonnées (left/right et top/bottom) d’un élément par rapport au premier élément parent « positionné », c’est à dire soit positionné en absolu ou en relatif. S’il n’y en a pas c’est par rapport à la fenêtre du navigateur.
      Pour positionner le menu contenu dans son <div id="page"> parent, si ce dernier n’est pas positionné il suffit de rajouter dans les CSS :

      #page{
          position:relative
      }

      Voili, voilou !

    Répondre à ce message

  • 1
    fouinette

    Bonjour,
    Je trouve ce plugin très pratique pour une débutante comme moi.
    Mais j’ai beau bidouiller le css et mon squelette dans tous les sens, impossible de savoir comment faire pour que la barre du menu prenne toute la largeur de mon site (comme c’est le cas pour le site Le Cri du peuple).
    Par exemple, si je place une div avec un background-color, la couleur de fond disparait à l’insertion du menu Babbibel. J’ai aussi essayé de faire une sorte de « faux onglet » pour combler l’espace restant mais sans résultat.
    Auriez-vous une astuce ? Merci pour votre aide.

    • Hello, ce message m’avait échappé...

      Sur cridupeuple.com le menu est dans une div menu_d dont voici le css

      #menu_d {
      width: 100%;
      background-color : #888888;
      margin-bottom: 0.5em;
      float: right; }

      bon courage.

    Répondre à ce message

  • 1

    je ne comprends pas la phrase suivante : « Pour faire apparaitre le menu dans votre squelette, placez-y le code [(#MODELEmenu)] là où vous souhaitez que le menu apparaisse ».
    Est ce qu’on peut placer ce code dans le fichier body d’un thème par exemple. S’il vous plais est-ce que vous pouvez m’indiquer l’emplacement exact du fichier dont il est question ?
    Merci !!

    • ce code est à placer dans ton squelette, pas dans un thème.

      Pour le reste, il n’y a pas d’emplacement « exact », tout dépend de ton squelette, et de l’endroit où tu veux afficher ton menu.

      Généralement cependant, un menu se place après le titre de ton site

    Répondre à ce message

  • 3

    SULUT
    j’utilise spip 2.0.10 et eva 4.0 et j’ai trouvée ce superbe plugin et j’ai l’activer a partir le plugin eva bonus mais le probléme ce que les memes rubriques apparaissent dans le menu vertical et le menu horizontal du menu déroulant Babbibel
    j’ai essayée d’utiliser les mots clé pour exclure des rubriques du menu déroulant Babbibel par la création d’un nouveau groupe de mot clés nommée menu et ajouter le mot clé « exclu_menu_der’’’ mais rien se passe
    j’ai essayer de mettre ce mot clé dans le groupe »« affichage »" mais rien se passe
    aiiiiiiiiiiiiiide moi c’est trés urgent pour finir mon travail
    et merci a l’avance

    • comment tu a activé ce plugin en eva 4 parce que j’arrive pas à trouver le bon emplacement pour insérer le code « [(#MODELEmenu)] », merci d’avance

    • bonjour , merci de m’aider pour utiliser ce plugin en spip2 eva 4, j’arrive pas à trouver l’emplacement dans lequel je dois inserer « [(#MODELEmenu)] »

    • Salut,

      Je penses que tu auras plus de réponses en consultant les articles dédiés à Eva4....

      Ici par exemple :
      http://www.eva-web.edres74.ac-grenoble.fr/spip.php?article97

      Bon courage

    Répondre à ce message

  • Bonjour,

    Quelques questions concernant ce plugin :

    1/ Après son installation, tous les fichiers, et répertoires compris, sont en « 777 ». Des droits en « 755 » ne sont-ils pas suffisants ?

    2/ Il existe un sous dossier « css ». Pourquoi ? Visiblement le fichier CSS utilisé est ./menu_babi.css . Pourquoi avoir un double ?

    En tout cas, merci pour ce plugin !

    Répondre à ce message

  • bonjour , merci de m’aider pour utiliser ce plugin en spip2 eva 4, j’arrive pas à trouver l’emplacement dans lequel je dois inserer « [(#MODELEmenu)] »

    Répondre à ce message

  • 2
    Nothing

    Bonjour,

    Merci pour ce plugin, il est génial !

    Une question cependant : j’aimerai qu’un élément du menu redirige vers une URL spécifique (un nom de domaine donné).

    Est-ce possible ? Si oui, comment ?

    Merci !

    Répondre à ce message

  • 1
    Eddie the Ed’

    Bonjour, bravo pour cette barre que je souhaite installer...
    j’ai installé tout ce que je souhaites, c’est a dire le squelette zpip (dans le dossier plug in pour l’install ) et le theme ROCK !.
    toutefois, je tiens a préciser que je connais rien de rien en matiere de web...
    et je cale sur cette phrase

    « Pour faire apparaitre le menu dans votre squelette, placez-y le code [(#MODELEmenu)] là où vous souhaitez que le menu apparaisse »

    je comprend pas... ou dois je recopier cette fameuse ligne ? sachant que du coup, dans ma config, mon dossier squelettes est vide... puisque zpip s’instelle via plug in et la partie privée...

    donc... là... je suis au point mort... help me please !!! ;)

    Répondre à ce message

  • legentil

    Un menu déroulant est trés beau est trés pratique mais je craint qu’il aura un effet sur mon référencement sur les moteurs de recherche. on dit que les robots de moteurs de recherche ignore souvent les liens dans les menus déroulant. est ce que c’est vrai ?
    cordialement
    comparatif hebergement

    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