How to make menu with hover effect?

Ask the community
,
1

Hi dear,

I’d like to make a menu just like the one in this website : www.monsieurchaussure.com
My website link is www.gevcen.be How can I put this kind of code in my website?
I tried to make a code as in the screenshot below, but not really working…

Thanks!

1920×1080 509 KB

1 Like
2

Anyone for a solution?

3

Hi Simon!

It seems like you got most of it right.
You use the mouseIn/mouseOut in order to trigger the change.

I don’t think that I quite understand where your problem is.
Please elaborate on what you’re trying to achieve so we can give you a suitable solution.

Doron.

4

Dear Doron,

As I mentionned in my original post, I am trying to achieve a menu that is similar to the module on the website www.monsieurchaussure.com

However, with the code that I show on my screenshot, it does not seem to work good enough yet. I am attaching hereby a cloud link containing a video that shows exactly what I want AS IS and TO BE.

Can you help me to say what I am doing wrong with my code? And how to improve it please?

Thanks a lot

5

Sure you have the lightbox name entered correctly? And not the lightbox ID? Maybe it doesn’t work because of the mouseOut close event? Technically once the lightbox is triggered it should automatically close because you are no longer hovering the button right?

It looks like you’re trying to make a megamenu? Are you sure you want to use lightboxes for that? You will have to manually close the lightbox… It will not close with a mouseOut as you have it. Try using a container box w/ the show() and hide() functions instead.

6

So, if you want the lightbox to close on a mouseOut event, you have to use it on the lightbox itself, not the button…
Lightbox page code would be

import wixWindow from ‘wix-window’;
export function lightbox1_mouseOut(event, $w) {
wixWindow.lightbox.close();
}

7

@arthurwdodge You sir, are extremely correct.

8

I am having a similar problem - I have a collapsed box that expands when hovering over a button, I want the box to collapse when mouse leaves the button or the box. If I set it to mouseout for the box, it doesn’t collapse when the user hovers the button and then moves the mouse out in some other way. I feel like there has to be a solution to this. Is there a way to tell the mouseout event to not “evaluate” for some delayed period of time?

9

can you please share the complete code