Le menu déroulant Superfish

Pour réaliser la mise en page du menu principal, j'ai utilisé le module "superfish".

test tooltips

J'ai personnalisé ce menu en adoptant pour paramètres :

  • niveau de menu
    • Niveau de visibilité initial : 1 (ie: pour afficher  le menu à partir de la racine)
    • Nombre de niveaux à afficher : 4
  • Paramètres du bloc
    • Style : aucun ( ce qui sous-entendant une personnalisation du style : voir ci-dessous)
    • j'ai coché :

NB : voir le paragraphe "2. Lors de la page de mise en page des blocs" pour apprendre à accéder aux paramètres de superfish

    1. Styliser le menu Superfish

    Ce module fournit, dans le dossier "style",  le fichier "theme.txt" (reproduit en §3 onglet 1) qui doit servir de base à la personnalisation du style du menu superfish.

    J'ai reporté ci-dessous les instructions en commentaires dans l' en-tête du fichier récupéré lors du téléchargement du module

    /*
     * Sample CSS to add Superfish CSS to themes.
     *
     * Instructions:
     *
     * 1. Change the #YOUR-BLOCK-ID (below) to the ID of your Superfish block.
     *
     * 2. Add the CSS to your theme, either as a separate CSS file or as a part of
     *    the main CSS file.
     *
     * 3. Note that by removing the .sf-style-none, the style will be applied to
     *    the menu regardless of the "Style" selected in the Superfish block
     *    configuration.
     *
     */
    #YOUR-BLOCK-ID .sf-style-none {
      float: left;
      margin: 0;

    Pour personnaliser la bibliothèque CSS fournie par le module, il est donc essentiel de remplacer YOUR-BLOCK-ID par l'ID de votre bloc de menu. Cet ID dépend du thème de votre site. Pour mon site, l'ID à utiliser est :

    • block-dhv3-navigationprincipale pour le thème dhv3
    • block-navigationprincipale pour le thême dh

    Nous disposons de 2 pistes pour trouver cet ID

    • la page de mise en page des blocs
    • l'inspecteur des outils de développement Web des navigateurs firefox ou chrome

    NB : les  fichiers pour mes thèmes (nommés dh-sf.css et dh-sf3.css) sont  disponibles dans les onglets 2 et 3 du §3

    2. Lors de la mise en page des blocs

    Comme l'indique l'image ci-contre, il est possible de connaitre l'ID du bloc (point 2) à partir de la page "configurer le bloc" (/admin/structure/block/manage/ ou "structure - mise en page des blocs " (point 1)).

    3. L'inspecteur des navigateurs

    Comme le montre l'image ci-contre, l'inspecteur du navigateur firefox s'obtient en cliquant sur l'icône "ouvrir le menu" (point 1), puis sur l'item "développement web" et enfin sur l'item "inspecteur" ou par le raccourci "CTRL+MAJ+C"

    Lorsque la souris est placée devant le menu, le code html de la page montre l'ID du bloc (point 4).


    Mots Clé