Mega-menu doesn't hide

Ask the community
,
1

Help! I can’t seem to get the mega-menu to hide when the mouse isn’t selecting the button. And it’s driving me nuts!

Read and tried the info from the posts:
https://www.wix.com/velo/forum/coding-with-velo/mega-menu-overlapping and
https://www.wix.com/velo/forum/coding-with-velo/mega-menu-sub-menu and
https://www.wix.com/velo/forum/coding-with-velo/wix-mega-menu and
https://www.wix.com/velo/example/mega-menu

But still, the mega-menu does show with a mouse over, but it won’t collapse again when the mouse is moved away. Mouse-out in my understanding. Please note: I’m not a coder.

You can see the result here: funkoonwheels dot nl (Note: site is in Dutch) Code:

export function button1_mouseIn ( event ) {
let rollOptions = {
“duration” : 300 ,
“delay” : 0 ,
“direction” : ‘top’

                 }; 

    $w ( '#columnStrip11' ). show ( "roll"  ,  rollOptions ); 
    $w ( '#columnStrip9' ). hide ();

}

export function winkel_mouseOut ( event ) {
let rollOptions = {
“duration” : 300 ,
“delay” : 0 ,
“direction” : ‘bottom’

                 }; 
$w ( '#columnStrip11' ). hide ( "roll" ,  rollOptions );

}

export function button2_mouseIn ( event ) {
let rollOptions = {
“duration” : 300 ,
“delay” : 0 ,
“direction” : ‘top’

                 }; 

    $w ( '#columnStrip9' ). show ( "roll"  ,  rollOptions ); 
    $w ( '#columnStrip11' ). hide ();

}

export function button2_mouseOut ( event ) {
let rollOptions = {
“duration” : 300 ,
“delay” : 0 ,
“direction” : ‘bottom’

                 }; 
$w ( '#columnStrip9' ). hide ( "roll" ,  rollOptions );

}

2

should export function winkel_mouseOut ( event ) really be
export function button1 _mouseOut ( event )?

3

Thanks for the reply. If only it were that simple.

When I change it to export function button1 _mouseOut ( event ) the effect is the same: The menu won’t hide.
And when I change exportfunction button1_mouseIn ( event ) into winkel_mouseIn the whole menu won’t show.

The same is with Button2. It does show, but it won’t hide.

4

Are you sure all the events are firing properly? Try adding a console.log just after each mouse event. Missing logs mean you’ve lost the connections to the event handlers and might have to delete and recreate the mouseIn/mouseOut events for the buttons in the properties and events panel. As an aside, removing the semicolons after the right-braces (}) will make the editor less grumpy. Really hopes this helps.

5

Will try your suggestions soon and come back with the results asap

6

Back again. Had a little holiday.

What I can see in the console.log is:

975×516 45.7 KB

Now I do understand that a static event is blocking the events. And that it should be in the js in line 103. But how do I get in the .js and can I just delete line 103?

7

Is this your entire code? If so, you need $w.onReady( function () {…}); after all import statements to be sure the page loads before interactions with page objects. All the event handlers are static, which means they were created by the properties and events panel, and should be outside of the onReady function. If your code is not humongous, let’s have a look.
BTW, https://support.wix.com/en/article/velo-where-do-i-put-my-code is a terrific resource for this kind of stuff.