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

  • 7

    Bonjour et merci pour ce superbe plugin

    Un problème d’affichage (sous FFX, IE ..) le menu passe derrière les onglets crées avec le Couteau Suisse.
    Une idée ?
    Le z-index même modifié ne change rien ...

    • Je me réponds à moi même
      Il faut monter le z-index à ... 999999 !!!

    • Premièrement, Bravo pour ce menu, il remplace avantageusement le menu que j’avais paramétré
      mais ...
      ... Sur mon site, sous chrome, l’image du bandeau passe au dessus.
      dans la réponse précédente il est indiqué : « monter le z-index à ... 999999 » ... mais où ?

      Question subsidiaire n° 2 : comment faire pour ne pas sélectionner les rubriques ayant comme mot clef « exclu menu » ?

    • Je me répond à moi même pour la première partie : n’ayant pas trouvé où modifier le z-index du menu, j’ai modifié celui du bandeau en le passant à -10.
      Ça marche !

      La seconde question reste toujours posée ... mais je vais peut-être trouvé tout seul ;-)

    • Trouvé !
      La prochaine fois, j’attendrais avant de poser une question à laquelle je peux répondre... mais cela peut peut-être aider quelques uns.
      Donc, utilisant l’affichage « Secteur>>>sous-rubriques + articles », j’ai ajouté dans le fichier : inc/inc_menu_laur les boucles suivantes :
      devant :

      <BOUCLE_exclus_babbi(RUBRIQUES) {titre_mot=exclu_menu_der}{doublons exclueA}><BOUCLE_exclus_babbi>

      j’ai placé :

      <BOUCLE_exclus_babbi0(RUBRIQUES) {titre_mot=exclu_menu}{doublons exclueA}></BOUCLE_exclus_babbi0>

      pour exclure les rubriques concernées.
      Puis, devant :

      <BOUCLE_exclus_art_babbi(ARTICLES) {titre_mot=exclu_menu_der} {doublons exclueB}></BOUCLE_exclus_art_babbi>

      j’ai placé 2 boucles :

      <BOUCLE_exclus_art_babbi0(ARTICLES) {titre_mot=exclu}{doublons exclueB}{lang}></BOUCLE_exclus_art_babbi0>
      	<BOUCLE_exclus_art_babbi1(ARTICLES) {titre_mot=exclu_Menu}{doublons exclueB}{lang}></BOUCLE_exclus_art_babbi1>

      1 supprimant les articles ne devant pas apparaître dans les menus et l’autre, les articles exclus.

      Voilà, en m’excusant d’avoir posé les questions avant de chercher les réponses.

    • Hello,

      pour exclure un article ou une rubrique, il suffit de lui affecter le mot-clé exclu_menu_der. Il n’y a rien à modifier dans le code...

      Quelle version du plugin utilises-tu ? Quel type de menu utilises-tu ?

    • Certes, j’ai bien vu le mot clef « exclu_menu_der », mais je souhaitais ajouter ce nouveau menu à mon site contenant déjà un menu basé sur beespip et utilisant le mot clef exclu_menu.
      Voilà donc pourquoi j’ai modifié le code, je ne voulais pas reprendre tous les articles pour y ajouter un nouveau mot clef.
      version du plugin : 2.2
      menu utilisé : Secteur>>>sous-rubriques + articles (inc_menu_laur)
      mon site : le site de la famille

      Pour revenir à ma première question concernant le problème z-index, j’ai remarqué que de temps à autre sur Firefox, les sous-rubriques situées sous la rubrique choisie sont affichées au dessus du sous-menu déroulant... par contre je ne sais plus dans quel cas.

    • z-index : Problème résolu !
      Il ne s’agissait pas du tout d’un problème z-index, mais d’un mode d’affichage sous IE8 (pas firefox comme je l’avais indiqué).
      Quand le bouton « Affichage de compatibilité » est actif, les sous-menus disparaissent sous les menus (voir image)
      Le problème est donc résolu en revenant en mode normal.
      Merci et à bientôt.

    Répondre à ce message

  • Bonjour,
    J’ai le plugin "contact avancé" sous spip 2.0. Toutes mes rubriques s’affichent grâce à Babbibel mais je n’arrive pas à afficher dans le menu Babbibel l’entrée "Contact". Bien que j’ai ajouté #FORMULAIRE_CONTACT dans le squelette « inc-menu.html » .
    Merci de votre aide.

    <ul class="nav">
    	[(#CONFIG{babbi/accueil}|=={avec}|oui) <li>
    		<a href="#URL_SITE_SPIP/" title="[(#NOM_SITE_SPIP|textebrut)]"><Accueil></a>
    	</li>]#FORMULAIRE_CONTACT
    	<BOUCLE_exclus_babbi(RUBRIQUES) {titre_mot=exclu_menu_der}{doublons exclueA}></BOUCLE_exclus_babbi>
    	<BOUCLE_menus_bab(RUBRIQUES){racine}{doublons exclueA}{lang}{par num titre, date, titre}>
    	<li><a href="#URL_RUBRIQUE" [class="(#EXPOSE{babbin,babbout})"]>[(#TITRE|supprimer_numero|couper{80})]</a>
    			<B_sous_menus_bab>
    				<ul>
    					<BOUCLE_sous_menus_bab(RUBRIQUES) {id_parent} {lang}{par num titre, date, titre}{doublons exclueA}>
    						<li><a href="#URL_RUBRIQUE" [class="(#EXPOSE{babbin,babbout})"]>[(#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>

    Répondre à ce message

  • 1

    Hello,

    Où puis je aller « bidouiller » les caractéristiques du temps d’affichage
    En fait, je souhaiterais un affichage maximal d’emblée, pas progressif de G à D.
    Cordialement

    Répondre à ce message

  • Bonjour,
    je suis sous zpip avec spip 2.1
    j’ai CFG et j’ai installé le plugin et inclus le code dans mon squelette mais ça n’affiche rien.
    l’inclusion est vide

     <!-- inclusion du menu babbibel -->
    		<ul class="nav">
    	
    	
    	
    </ul>
    <!-- Fin du menu babbibel -->

    Qu’est-ce que j’ai oublié ?
    merci d’avance !

    Répondre à ce message

  • Bonjour,
    j’ai un problème sur mon menu deroulant, il marche bien sur IE6 mais sur IE7 et firefox ça ne marche pas. Quelqu’un peut il m’aider svp ?
    Merci

    Répondre à ce message

  • bonjour
    j’utilise le squelette blip, et j’ai voulu mettre en place le menu déroulant. J’ai inséré le insert_head dans le fichier sommaire.html mais mon menu déorulant ne s’affiche pas. Est-ce que quelqu’un peut m’aiguiller.Merci

    Répondre à ce message

  • salut !
    plugin très pratique ! et on peut apporter pas mal de modif au css
    seulement..
    je n’arrive pas à mettre une image de fond, je change la couleur sans pb, mets des raduis et tout, mais on dirait que ça ne prend pas l’url de l’image..

    je pige pas où est le blocage ? une piste ? une solution ?

    Répondre à ce message

  • 1

    Bonjour, j’aimerais que dans mon menu, seuls les articles soit des liens et non les rubriques et sous-rubriques. J’ai cherché en regardant avec firebug dans ma page html, je vois bien où ça se situe, seulement je ne sais pas quel fichier modifier en conséquence...
    J’utilise le type de menu > sous-rubriques + articles.

    • Affaire résolue !
      J’ai trouvé le fichier (inc_menu_laur.html) et surtout, j’ai du le mettre dans le dossier du plugin et non pas dans le dossier /squelettes sinon le fichier n’était pas pris en compte.
      Je suis étonnée. Il me semblait pourtant que tout ce qui était dans le dossier /squelettes passait avant tout le reste... petit bug ?!
      Bref ça fonctionne !

      Merci en tout cas pour ce plugin très efficace !

    Répondre à ce message

  • Bonjour,

    Encore merci pour cette contrib. Petite question...Est-il possible d’afficher les brèves avec ce menu déroulant...?

    Je sais qu’on peut le paramétrer pour faire apparaître les sous-rubriques et/ ou articles (fort utile merci :)) mais je n’ai rien trouvé dans le forum concernant les brèves...

    Je place mes brèves dans une rubrique « actualités » à la racine. Mais elles n’apparaissent pas au survol de cette rubrique dans le menu déroulant...brrr

    Quelqu’un peut-il me dire s’il a réussi ou du moins casser mon rêve si ce n’est pas possible (j’en suis déjà à quelques heures d’édition et de tests sur des boucles hypothétiques)...merci.

    Répondre à ce message

  • 2

    Très impressionnant ce plugin.

    Je vais tenter de le mettre en mode verticale parce que bon c’est tout autant utile suivant les besoins.

    Par contre je me demandais par ou modifier les effets du plugins.
    Si on regarde le cri du peuple par exemple on retrouve : $(this).find(’ul:first’).css(visibility : « visible »,display : « none »).slideDown(« normal ») ;
    Hors je si je fais de même de mon coté je n’ai aucune modification.

    Merci

    • Hello, Penses à vider tes caches. Le #CACHE du menu est assez important puisqu’il n’est pas sensé varier souvent.

    • Helloo,

      Je cherche moi aussi à utiliser ce menu en mode vertical mais en vain aprés moults recherches.

      Un an plus tard, as-tu réussi ?

      J’ai fait la même modif que toi dans le fichier « menu_babbi.js » mais cela ne change rien.
      j’ai même essayé $(this).find('ul:first').css({visibility: "visible",display: "block"}).show(400); au lieu de $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400); sans aucuns effets.

      Concernant la réponse de babbibel, j’ai vidé le cache de spip depuis l’espace privé du site. Ainsi que ceux de mes navigateurs après chaque test.

      Si quelqu’un a un début de réponse, merci au nom de tout ceux qui aimeraient utiliser ce menu en vertical.

    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