Forum Academy Marketplace Showcase Pricing Features

Créer un menu qui apparait lorsqu'on hover un lien dans le header

Other languages Francais (French)
#1

Salut à tous,

Je bute sur un truc qui semble archi-simple :confused:
Je veux faire un header avec des catégories qui, lorsque on passe le curseur dessus (hover) fait apparaitre une group.

Exemple : sur le site de qonto, lorsqu’on passe sur la section “Business”.

J’ai essayé en utilisant la fonction conditionnelle “ce groupe est visible lorsqu’on hover le lien x” mais cela m’oblige à avoir un header d’une grande hauteur pour y faire tenir le group. Et du coup les boutons qui sont situés en dessous du header ne sont plus clicables (le header étant transparent)…

Quelqu’un a une idée de comment contourner le problème ?

Merci à ceux qui ont ne serait ce que des bribes de solutions.

Cheers !

#2

Salut !

Désolé pour la réponse tardive, mais mieux vaut tard que jamais !

Pourquoi tiens-tu absolument à mettre ton group dans le header ?

Wesley

#3

Salut Wesley,

Merci pour ton retour ! Je ne tiens pas particulièrement à mettre le group dans le header. Ce que je voudrais, c’est faire apparaitre un group lorsqu’on passe le curseur sur les catégories dans le header.

Mon header est un floating group. A ma connaissance, on ne peut pas faire apparaitre un group sur une autre zone que le floating group…?
Si tu veux jeter un oeil : https://group-trips.com/version-test/

Alexis

#4

Salut Alexis,

Si, bien sûr que tu peux !
Crée un (ou plusieurs) floating groups que tu places sous ton menu déroulant (à l’endroit où tu voudrais qu’il s’affiche).
Et mets-y le conditional formatting “ce floating group est visible lorsque le lien x est hovered” !

Tiens moi au courant :slight_smile:

Wesley

#5

Je me suis mal exprimé : on peut, mais le floating group même s’il n’est pas visible couvre les autres éléments qui ne peuvent plus être cliqué (les boutons notamment). L’utilisateur ne peut plus cliquer sur les boutons car ceux ci sont recouvert par le floating group invisible).

Je n’ai pas d’autre choix que de faire une popup même si ce n’est pas très pratique… :-/

Si tu as des idées je suis preneur mais j’ai hélas peu d’espoirs…

Alexis

#6

Pour être sûr qu’on parle de la même chose, j’ai reproduit ce que je pense que tu cherches.

J’ai bien mis un bouton en dessous du floating group et il reste clicable lorsqu’on ne hover pas “Text”
Clique ici :

Dis moi si c’est bien ça

Wesley

1 Like
#7

Waow ! Oui, c’est exactement ça. Comment as-tu fait ?
Je dois mal suivre tes instructions. Voici ce que je fais :

image
image1411×644 54.7 KB

Mais dans ce cas le bouton en dessous n’est plus clicable contrairement à ton exemple. Comment fais tu pour que le bouton reste clicable ?

Merci pour ton aide !

Alexis

#8

Avec plaisir ! :slight_smile:

As-tu bien décoché “This element is visible on page load” du floating group?

Wesley

1 Like
#9

Salut Wesley,
Je cochais bien la case mais je viens de comprendre : en fait j’ajoutais le floating group lorsque j’étais sur la vue “reusable element” du header au lieu de l’ajouter depuis la page index. Merci beaucoup pour ton aide !

A plus !

Alexis

1 Like
#10

Bonjour,
Je ne sais pas si vous etes toujours là mais j’ai le même problème que vous Alexis et je n’arrive pas à trouver la solution…
J’arrive a afficher le sous menu quand je passe la souris sur le menu en revanche je n’arrive pas à le fixer et quand je descend la souris le sous menu s’enlève.
Auriez vous une solution à me communiquer ?

image
image1920×1080 315 KB

Merci beaucoup pour votre aide
Thibaut

#11

Bonjour Thibaut,

Tu peux le faire en utilisant un floating group et 2 conditions sur le floating group :
1/ Ce floating group est visible lorsque le group “Découvrir Nos Services” est hovered
2/ Ce floating group est visible lorsque ce floating group est hovered.
(n’oublie pas de décocher la case “this floating group is visible on page load” du floating group).
Exemple :

image
image812×686 117 KB

Dis moi si ça correspond à ce que tu cherches.

A+
Alex

#12

Bonjour,

J’ai le même souci que Thibault quand je souhaite cliquer sur mon Floating Group celui ci ne reste pas malgre que j’ai mis les 2 conditions?

J’ai du mettre le floating group sur le header car sur l’index je ne peux ajouter le groupe qui doit hovered pour que mon floating group s’affiche.

J’espère que j’ai été claire
Merci pour votre aide :slight_smile: