Résolu Menu déroulant (avec barre défilement) dans le header

Bonjour,

J'ai trouvé ce tuto pour créer un menu déroulant avec barre de défilement mais j'aimerais savoir comment le placer dans le header.

A l'avance merci pour l'aide que vous pourrez m'apporter !

Bon WE à vous 

Bonjour,

j'suis pas pro en codes (ça commence bien ) mais il y a un tuto dans le forum Trucs et Astuces, par là↗,  si ça peut aider :) 

un autre tuto, + personnalisé,  avec + d'infos, via le Html  ET le CSS : par là↗ 

Bonnes suites

Bonjour Parthenia et Pipiou,

Le code indiqué sur codes-test.ek.la est prévu pour être utilisé dans un module de menu pour faire défiler un texte ou une liste de liens, pas pour faire un menu déroulant dans le header

Pour faire un menu déroulant au niveau du header, c'est dans Apparence > Menu de l'en-tête.

Bon a.m.

Bonjour Pipiou et Stormalo,

Je vous remercie pour vos réponses et vous présente mes excuses pour mon manque de réactivité !

Etant désormais en vacances, j'ai pu me pencher plus sérieusement sur mon problème.

Stormalo, en panachant le code indiqué sur codes-test.ek.la et celui  indiqué sur le blog de Nagalia, j'ai réussi à mettre le module avec scrollbar dans le header (désolée si ma demande n'était pas très claire...). Je reviens vers vous parce j'aimerais personnaliser ma scrollbar mais le blog qui proposait un tuto a été supprimé ou mis hors ligne ! Auriez-vous par hasard une idée de la marche à suivre ?

Encore merci et bonne soirée à vous deux ! 

Bonsoir,

Service rapide ce soir, les dieux sont favorables, le hasard aussi.

Je viens de retrouver le tuto dans les tréfonds du web .

Voici le lien:
https://web.archive.org/web/20200922144335/http://girly-r.ek.la/personnaliser-la-scrollbarre-a126698018?reply_comm=82712056

Trois ou quatre grosses poignées de secondes pour que ça s'affiche !

Au cas où, j'ai fais une copie d'écran (cliquer dessus pour voir plein écran)

Perso je n'ai jamais essayé de personnaliser une scrollbar, alors si ça marche ce serait sympa de le faire savoir à la suite. (en espérant que des doigts un peu trop zélés ne viennent pas clore ce sujet avant ton retour d'expérience)

Bon essais.

Bonsoir Stormalo,

Merci infiniment ! 

Je le teste dès que possible !

Bonne soirée à toi 

EDIT : par contre question stupide : je le mets dans le css, mais je le rattache comment à mon module ?

Bonjour bonjour,

si ça peut aider, je suis arrivée sur cette page↗, en fouillant à droite à gauche sur le Net↗.

Pour rattacher le code au module, il faut prendre un lien plus solide (j'ai pas pu m'empêcher ) 

Si je ne me trompe pas, il faut indiquer le nom/numéro du module concerné par ces codes, mais... est-ce bien un module ?? (voir dans le Petit Dico↗)

Indique l'adresse du blog, ça sera + facile à visualiser :)

Bonsoir,

Merci beaucoup à tous les deux !

Le code retrouvé miraculeusement par Stormalo a fonctionné ! Alleluia ! Par contre, je n'ai pas trouvé comment ne le rattaché qu'au module qui m'intéressait mais ça n'est pas du tout grave, ça me va comme ça !

Bonne soirée à vous deux !

Bonsoir Parthenia et Pipiou

Je viens de bidouiller un peu à partir de ce code ressuscité.

Comme annoncé il ne fonctionne pas avec tous les navigateurs. Il ne peut agir que sur des pseudo-éléments." Hors perspective de standardisation" (?)

Pour Firefox on peut utiliser un css pré-standard,  beaucoup plus simple, mais on peut uniquement agir sur la couleur et sur la largeur (fine ou standard)

Quelques essais (Firefox, Edge).  Chrome utilisant le même moteur de rendu que Edge, sauf erreur de ma part les résultats doivent être identiques.

- Le code avec les -webkit- ne fonctionne pas avec Firefox.
- J'ai trouvé sur le site MDN (Mozilla) un css, adapté à Firefox.

- En utilisant en simultané ces deux types de codage, le résultat est similaire sur le module ciblé (mais  -webkit-  modifie systématiquement la barre de défilement principale, ainsi que toutes les autres barres de scroll - éditeur inclus - alors que Firefox  conserve les autres barres dans l'état par défaut): 

Voir le résultat : il est temporairement en service sur l'atelier du château, page Bienvenue, module "Citations". Et en profiter svp pour voir éventuellement sur d'autre navigateurs que les miens.

@ Parthenia pour "rattacher" a un module, il faut faire précéder les -webkit- par  l'identifiant de ce module, s'il existe. Sinon il faudra en mettre un.

Code testé:

/* pour Mozilla firefox  */
#module_menu_contenu2138976 {
   scrollbar-color: blue orange;
  scrollbar-width: thin;   /* thin ou auto */
}

/* pour Microsoft Edge */
#module_menu_contenu2138976::-webkit-scrollbar {
 width: 8px;
  background: orange;
}
#module_menu_contenu2138976::-webkit-scrollbar-thumb {
  background: blue;
  border-radius: 8px;  /* facultatif */
 }

Oh là là, Stormalo,, je ne sais que dire ! A part, merci ! Infiniment... Quel travail ! 

J'avais mis le bon identifiant, mais j'avais dû m'emmêler les pinceaux pour la suite ! 

Je suis confuse que tu aies passé autant de temps à m'aider... 

Encore un immense merci et bonne soirée à toi !