superfish - menus jQuery

Superfish est un module drupal qui implémente le plugin jQuery nommé superfish sur les menus de Drupal. Cette page concerne la version 1.9 (date 2013-04-27) - la version 7.x-1.9+33-dev fonctionne mieux pour les petits écrans, et est assez stable pour fontionner en prod.
La v2 est sortie le 25/11/2015

La page d'admin est à admin/config/user-interface/superfish mais ne contient que le nombre de menus (2 suffisent amplement) et les liens vers la lib. Aller plutot à admin/structure/block (puisque tout menu dans drupal crée un bloc).
propose directement ds son interface choix zone de omega HTML5... pour Bartik, il faut aller ds blocks. Doc en anglais à https://drupal.org/node/1125896

update: la version de dev fonctionne mieux (au clic il cache/montre la barre de nav) => drush dl --select

install (drupal 7: superfish 7.x-1.9)

1. La librairie superfish (v 1.x prod) doit être en sites/all/libraries (http://ex.com/sites/all/libraries/superfish/superfish.js) - cf http://drupal.org/node/1440066
   mais le README du module Superfish indique
   1. https://github.com/mehrpadin/Superfish-for-Drupal/zipball/master (v 1.0-37 dernière v)
   2. qui contient un autre README:
      Requiert au min jQuery version 1.3.x et jQuery version 1.6.1 ou + si on veux utiliser le plugin jQuery Easing
      Contient: superfish.js (jQuery Superfish plug-in version 1.4.8), Query Supersubs plug-in version 0.3-beta, jQuery Supposition plug-in version 0.2, jQuery sf-Touchscreen plug-in version 1.3-beta, ...
      Cf jQuery Superfish plug-in page à http://users.tpg.com.au/j_birch/plugins/superfish
2. Le module libraries en  sites/all/modules - (j'ai la 7.x-2.2, 2014-02-09)
3. Le module superfish en sites/all/modules   (via drush: superfish-plugin - ici 1.9, 2013-04-27)

sudo drush dl jqeasing libraries superfish-plugin
sudo mkdir sites/all/libraries/easing ; sudo mkdir sites/all/libraries/superfish
sudo cp ~/Téléchargements/jquery.easing.min.js  sites/all/libraries/easing/jquery.easing.js

En mai 2014, https://drupal.org/project/superfish conseille plutot d'utiliser JQuery Update, en indiquant "jQuery version 1.6.1 ou + si on veux utiliser le plugin jQuery Easing".
Pour jQuery 1.9 (ou +): prendre la version master. Pour easing, il faut renommer un fichier.
Le module libraries y est conseillé.

Mise en forme (modifs de CSS)

Deux méthodes, selon la version du module (> à 1.8 ou non) - mais je ne détaille pas ici pour les versions antérieures (ici c'est la 1.9):

1. Choisir le style none (bloc) et copier dans son thème les def (par ex, copier sites/all/libraries/superfish/style/default.css) en y effacant les sélecteurs de classes .sf-style-default et personnaliser à souhait.
2. Pour la version 1.8 (ou supérieur, ie 1.9 en avril 2014), le formulaire de configuration (du block) part à la recherche de feuilles de style dans sites/all/libraries/superfish/style.
   On peux donc y ajouter des .css 
   Si l'on copie de /all/libraries/superfish/style/default.css renommer .sf-style-default par .sf-style-[CSS FILE NAME]  - il faut que si le fichier CSS est nommé clean.css alors le sélecteur de classe doit etre  .sf-style-clean

Avec sass

cf http://drupal.stackexchange.com/questions/107729/styling-superfish-menu-...

tips (en plus de Firebug)

Mettre un "Menu delay" proche de 99999999 pour travailler sur les sous-menus. Si l'on n'utilise pas les styles prédéfinis, la liste déroulante Style devrait etre à None.
Utiliser le style "Simple" comme référence (renommer les selecteurs de la classe principale) ; en cas d'ajout d'une feuille de style: soit l'ajouter dans le thème, soit dans sites/all/libraries/superfish/style - l'ajout d'une css dans ce dossier (style de la lib) a pour action de l'ajouter dans la liste déroulante des styles de la configuration du block. Attention ne pas remplacer partout "simple" par "ma-liste" car des noms de fichiers contiennent "simple" (ou renommer les images).

bien nommer: pour le fichier CSS nommé clean.css le selecteur de classe CSS doit être .sf-style-clean (ie si .sf-style-default renommer en .sf-style-[nom fichier CSS])

plus simplement

ajout de styles dans le thème

Noter l'ID du menu superfish -

Partir de sites/all/libraries/superfish/style/SAMPLES/THEMES.txt y rechercher "#superfish-1"  et le remplacer par l'ID du menu superfish.

Paramétrer le bloc

Ex de navbar, mis en entete avec le form de recherche (sous-theme avec désactivé "lien primaires" et secondaires) avec le style nommé Pomegranate
Navbar garde 2 niveaux. Le style Space-teal est dans les verts sombres.

Sur le web

Vers la page de doc officielle du module (en anglais) https://drupal.org/node/1125896

Télecharger le module drupal superfish à http://drupal.org/project/superfish