Menu jQuery Superfish

Publié le : 19 mars 2011 – Dernière modification le 17 mars 2023 – par b_b, Yffic – 126 commentaires

1
2
3
4
5
15 votes

Ce plugin est un portage pour Spip du plugin jQuery Superfish de Joel Birch : https://superfish.joelbirch.design/

Principe

Ce plugin permet l’affichage d’un menu déroulant horizontal ou vertical sur une structure de menu de type ul/li.

Ce plugin ne s’occupe pas du contenu du menu. Le travail peut-être délégué au plugin Menus ou à une noisette Aveline par exemple ou même géré indépendamment en squelette. Il suffira de donner au ul principal du menu la même classe que celle définie dans la page de configuration de ce plugin (Voir ci-dessous).

Installation

Comme tous les autres plugins, cf. https://www.spip.net/fr_article3396.html

Le plugin nécessite les plugins Saisies et YAML (+ Spip_Bonux pour Spip 2.1).

Activation du menu

Attention : Suite à un bug dans le plugin Saisies, le formulaire de configuration ne fonctionnera pas si vous activez l’option Permettre le HTML5 dans les pages de configuration avancée de SPIP.

La page de configuration du plugin permet de :

  • choisir le type de menu à activer : horizontal et/ou vertical
  • saisir la classe de l’élément ul principal du menu
  • saisir l’effet d’animation lors de l’affichage des sous-menus
  • saisir le délai entre la sortie du pointeur du sous-menu et la fermeture de celui-ci

Il ne reste plus qu’à définir vos couleurs en surchargeant la feuille de style du plugin.

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

33 discussions

  • 7
    Fennec72

    comment intégrer sf_navbar ?

    Pas de problème pour sf_horizontal et sf_vertical,
    mais je n’y arrive pas avec sf_navbar !

    Que dois-t-on faire dans ce cas avec les plugins « Menu jQuery Superfish » et « Menus » ?

    Merci d’avance et merci pour ce plugin

    • Yffic

      Ha ben oui... Je n’avais pas bien testé... Mauvais copié/collé... C’est corrigé en svn, le zip va suivre dans une heure

      Merci pour le signalement

    • Fennec72

      Hello et merci :

      Mais sous spip 3 beta 2, il y a une erreur dans le déroulement de la mise à jour :

      La mise à jour du plugin « Menu jQuery Superfish » (de la version : 0.4.1 à ) ne s’est pas correctement déroulée

      tu remarqueras que le message d’erreur n’indique que la version avant tentative de mise à jour :

      de la version : 0.4.1 à

      sans rien après !

    • Yffic

      Avec la version spip svn 18959 du 2 février pas de problème de mon coté

      Je viens de tout mettre à jour, spip3 et tous les plugins, pas de problème non plus... Et je ne vois pas pourquoi il y en aurait vu ce que j’ai modifié...

      J’ai aussi essayé en passant par la mise à jour automatique via SVP, pas de soucis non plus...

      Je sèche

    • Fennec72

      je viens de récupérer la version svn et je suis donc en version 0.42.

      mais l’option navbar ne fonctionne toujours pas !

      j’ai fait attention de bien vider le cache de spip par toute les sources possibles additionnées :
      -  depuis l’espace privé
      -  depuis l’explorateur de fichier (je suis en local, pour l’instant), j’ai suprimé le sous-dossier « cache-css » du dossier « local »

      mais çà ne fonctionne toujours pas.

      d’ailleurs j’ai quelques questions sur le réglage « Menu navbar » :
      -  Est-ce normal que lorsqu’on l’active, cela ne désactive pas automatiquement l’option « Menu horizontal ? »
      -  pourquoi est-ce que c’est la classe « sf_horizontal » qui est entrée par défaut ? (voir capture jointe)
      -  si on entre la classe « sf_navbar » à la place, çà ne fonctionne pas non-plus.

      Normalement le résultat devrait-être comme dans l’exemple du site de jquery superfish :
      http://users.tpg.com.au/j_birch/plugins/superfish/#sample4

      Une dernière question subsidiaire :
      -  Quelle la méthode la plus simple pour changer les couleurs du menu jquery superfish ?
      -  peut-on mettre une feuille de style superfish.css dans le dossier squelettes ?

    • Yffic

      Zut, en corrigeant, j’ai rajouté un autre bug... Corrigé en version 0.4.3.

      Concernant les autres questions :
      -  Oui, il est normal que lorsqu’on active "navbar", cela ne désactive pas automatiquement "horizontal", car on peut avoir plusieurs menus de types différents sur la même page
      -  La classe « sf_horizontal » n’est pas entrée par défaut. Tu as dû l’insérer à un moment. Le plugin ne propose aucun paramétrage par défaut.
      -  Pour modifier les css, il vaut mieux les surcharger dans ton fichier perso.css

    • Fennec72

      De nouveau, le même message d’erreur (voir capture) : "La mise à jour du plugin « Menu jQuery Superfish » (de la version : 0.4.2 à ) ne s’est pas correctement déroulée"

      Je suis donc de nouveau passé par le client svn pour la 0.4.3 et çà marche impec !

      Au passage, une petite coquille dans le sous-titre descriptif du plugin :
      "Affiche un menu dèroulant" accent grave au lieu d’aigu.

      Hervé Le Dantec

      P.S. : "Yffic" , donc un peu breton sur les bords ?

    • Yffic

      La mise à jour via SVP n’est peut être pas encore complètement finalisée... On est toujours en béta ;-)

      Et oui, 100% breton pur jus !

    Répondre à ce message

  • Yffic

    Hello. Ce plugin ne s’occupe pas de générer l’arborescence ul/li... C’est donc dans cette construction que tu dois intervenir.

    Répondre à ce message

  • benoloas

    Bonjour, et tout d’abord, que des louanges à faire sur ce plugin. Remarquable ! Je ne m’en lasse pas.
    Une question pour les sites multilingues : où peut-on glisser un &LANG dans le plugin pour que l’URL de pointage prenne ce paramètre en compte...

    En vous remerciant.

    Répondre à ce message

  • 5
    SuNn

    Rien compris ... excusez moi :(

    J’ai rajouté classe css sf_vertical et dans superfish classe sf_vertical, mais rien ne s’affiche sur ma page

    • Yffic

      Hello

      Y a t’il une url où on puisse voir le problème ?

      Si tu inspectes le code html généré, l’arborescence ul/li est-elle bien là ?

    • SuNn

      Bonjour,

      Merci pour ta réponse, la page est à l’adresse http://nh.enter-sect.com

    • SuNn

      voila quelques printscr de mes manips sur la config de menu et de superfish, si ça peut aider
      http://www.imagup.com/data/1140685070.html
      http://www.imagup.com/data/1140685118.html

    • Yffic

      Ta config de menu et de superfish semble correcte. Ce pendant tu n’as pas inséré dans ton squelette le menu « MonMenu » avec le code #INCLURE{fond=inclure/menu, env, identifiant=MonMenu}

      Actuellement ton menu est inséré avec <INCLURE{fond=inc-rubriques}>. Donc la classe sf_vertical n’y est pas.

    • SuNn

      Bizarrement l’inclusion avait sauté dans ma page sommaire merci ! Désolé pour le bruit sur le forum et le dérangement.

      Est ce que Muxort aurait trouvé la manip pour faire s’afficher les sous-menu à gauche ? ça me serait bien utile ! Merci

    Répondre à ce message

  • 3
    benolaos

    Bonjour,
    je voulais juste signaler une incompatibilité avec le plugin nochache...

    • Yffic

      Hello

      Peux tu donner un peu plus d’explications ? (Nocache est indiqué compatible spip 2.0 max et Superfish ne l’est qu’avec spip 2.1)

    • benolaos

      Bonjour Y,

      A l’activation de nocache, une longue suite d’erreurs (callstack) titrant par un
      Fatal error : Maximum function nesting level of ’100’ reached, aborting ! in XXX\ecrire\inc\utils.php on line 155
      La liste des plugins ne s’affichent alors plus.

      Pour info, J’utilise les plugins saisie, yaml, cfg, bandeau, afficher_objets, court-circuit, encarts, et spip-bonux, mais aucun d’eux ne semble montrer d’incompatibilité.

      Une alternative est de prendre le plugin couteau suisse et de ramener le cache à 0. Ca fonctionne.

    • Yffic

      Hello

      Je ne sais pas si tu as trouvé une solution, mais j’ai eu le même problème en php 5.3. Et pas de souci en php 5.1. Je n’ai pas encore compris pourquoi...

    Répondre à ce message

  • Nico

    Ok, merci beaucoup pour l’info.
    Bonne journée à vous,
    N

    Répondre à ce message

  • 3
    Nico

    Bonjour,
    > J’ai créé mon menu (plugin Menus)
    > j’ai installé ce plugin
    > Je souhaiterai intégrer des mini-icones (en indiquant le lien)

    Pourriez-vous m’indiquer ce qu’il faudrait que je fasse svp ?
    Je fonctionne avec un squelette EVAweb, et ne sait pas intervenir dans les codes (malgré plusieurs tentatives avec skeleditor).

    Merci Beaucoup,
    N

    • Yffic

      Hello

      Tu voudrais avoir des icônes avant le texte de chaque élément de menu, c’est ça ? Il faudrait le faire en css... Enfin ça dépend un peu des icônes, y’en a une différente par élément de menu ?

    • Nico

      Il y en a une par rubrique & sous rubrique (soit ≈ 25).

      J’y étais parvenu en trifouillant avec kompozer le code obtenu par le pluging menu , mais le squelette me signalait évidement des erreurs.
      A priori je pensais mettre les images en ligne (jpeg 25x25) et trouver un moyen de les appeler. Y a-t-il cette possibilité avec le pluggin ?
      Merci !

    • Yffic

      Non, ce n’est pas le rôle du plugin... Il faut que tu vois au niveau des css

    Répondre à ce message

  • 3
    benolaos

    Bonjour,

    Pensez-vous qu’il soit faisable d’afficher les menus (au moins du 1er niveau) avec une police non standard (comme on peut le faire avec Choix Police Typo) ? Et si oui... comment verriez-vous la chose ;-)

    • Yffic

      Je ne connais pas ce plugin, mais il m’a l’air de créer des images typo. Dans le principe ca peut fonctionner car le plugin superfish ne s’occupe pas de créer le contenu mais uniquement de son affichage. A toi de créer l’ensemble ul/li avec les images typo. Sinon tu peux essayer avec la directive @font-face en t’inspirant de ceci http://typographisme.net/post/Bonnes-pratiques-pour-les-d%C3%A9clarations-@font-face

    • benolaos

      Dommage (a priori) de ne pas pouvoir utiliser le filtre image_typo, puissant et tout navigateur.

      Effectivement, on peut passer par le CSS. Merci pour le lien !
      Pour info, après plusieurs essais (pour garder la compatibilité avec IE, FF, Opera et Safari), il semblerait que le bon ordre d’écriture soit : .eot, .eot ?, otf, .ttf, .woff

    • Yffic

      Hello... Je n’ai pas dis que ce n’était pas possible. Au contraire. Vu que le plugin de s’occupe que de l’affichage, dans le contenu tu mets ce que tu veux en respectant la structure ul/li. Qu’il y ai du texte ou des images dans les li, c’est pareil.

    Répondre à ce message

  • 5
    DjackO

    problème d’installation :
    sur une 2.1.11, j’obtiens cela après installation dans la gestion des plugins
    Attention : un problème technique (serveur SQL) empêche l'accès à cette partie du site. Merci de votre compréhension.

    et sur 2.1.12 : pas de message, mais fait planter la partie gestion des plugins

    • Yffic

      Hello

      Je viens de tester sur une 2.1.11 et une 12.1.12, je ne rencontre pas de problème d’installation. Peut être as tu un soucis de nombre de connexions simultanées (http://forum.spip.org/fr_234934.html) ?

    • DjackO

      Je ne pense pas pour sql, C’est sur mon serveur de test.
      Je viens de faire un test sur un autre serveur dédié (ovh) sur 2.1.12 avec uniquement
      CFG 1.16.0
      Menu jQuery Superfish 0.2.0 -
      Saisies pour formulaires 1.18.0 -
      YAML 1.5.0 -

      Et j’ai une erreur sql à l’installation. Le plugin semble s’installer mais dans la config, il n’y a pas de paramètre...du moins pour le configurer.

    • Yffic

      Est-ce que tu vois quelque chose d’anormal dans les log ?

    • DjackO

      ok, nécessite spip bonux pour la boucle (POUR).

    • Yffic

      Arf, c’est pour Saisies... Merci, je rajoute le necessite

    Répondre à ce message

  • 3
    Commetou

    Bonjour,

    Merci pour ce plugin. J’avais moi-même commencé à le codé mais votre travail est bien supérieur au mien !

    Il y a une erreur à la validation W3C.
    Dans le fichier superfish_pipelines.php, lignes 9 et 10.
    Il manque un espace après le « de : ’ »media=« all » />’ devient ’« media= »all" />’
    J’ai corrigé chez moi.

    • Yffic

      Hello

      Je ne vois pas d’espace qui manque a ce niveau la... Bizarre

      As tu un lien où l’erreur est présente ?

    • Commetou

      Voici les lignes avant corrections :

      function superfish_insert_head_css($flux){
$flux .= '<!-- Debut Menu SUPERFISH -->
<link rel="stylesheet" type="text/css" href="'.find_in_path('css/superfish.css').'"media="all" />'."\n";
$flux .= '<link rel="stylesheet" type="text/css" href="'.find_in_path('css/superfish-navbar.css').'"media="all" />
<!-- Fin Menu SUPERFISH -->'."\n";

      Le m est collé au ", il faut donc rajouter un espace

    • Commetou

      Groumf....
      L’erreur vient de la réactivation de mon plugin superfish et non du votre.
      Une fois le votre activé, il n’y a plus d’erreur.
      Désolé pour le bruit.

    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