Forum Academy Marketplace Showcase Pricing Features

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

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 !

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

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

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

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

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

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

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

Avec plaisir ! :slight_smile:

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

Wesley

1 Like

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

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 ?

Merci beaucoup pour votre aide
Thibaut

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 :

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

A+
Alex