Wix Mega Menu

Hello,

I am trying to create an interactive and design dropdown menu. It worked well on the code but it is not perfect, as you can see in the video, when I hover the button to make de detail menu appear and when I go with the mouse on the detail menu there is like a freezing, how can I remove it ?

$w . onReady ( function () {

$w ( '#button22' ). onMouseIn (( event ) => { 
    $w ( "#box13" ). show ();  
}); 

$w ( '#button22' ). onMouseOut (( event ) => { 
    $w ( "#box13" ). hide ();  
}); 

});

export function box13_mouseIn ( event ) {
$w ( β€œ#box13” ). show ();
}

export function box13_mouseOut ( event ) {
$w ( β€œ#box13” ). hide ();
}

Wehn you enter β†’ button22 β†’ box13 β†’ shows β†’ OK
When you enter β†’ box13 ------> box13 β†’ shows β†’ OK

WAIT! Why the box13 β†’ shows again, when it is already showed?

And why at the same time box13 β†’ hides ?

Please make some more thoughts about the behaviour of your BUTTON and BOX - actions.

Some more info for you:

  1. When working with β†’ HIDE and SHOW β†’ also consider to work with β†’ collapse & expand, why ??? β€”> Because this could have positive effect on mobile-view β†’ although! β†’ in most cases, the mobile page-view is so different to the desktp one, that you will have to create a second page, developed just for mobile view at the end.

  2. Disatvantages, of using the developing method for creating a Mega-Menu you do:
    a) Your Mega-Menu won’t be dynamic, instead it will be static
    b) Your Mega-Menu won’t be responsive (if you do not use strips or repeater).

Advantages of using REPEATERS and STRIPS to design a MEGA-MENU:
a) You are able to create some kind of RESPONSIVNESS
b) You are able to create dynamic and flexible menus.

Also have already seen the following example?..???
https://www.wix.com/velo/example/mega-menu

BTW β†’ please delete your β€”> DOUBLE-POST! β†’ Not neccessary!
https://www.wix.com/velo/forum/coding-with-velo/interactive-dropdown-menu

And why didn’t you use the provided tip by J.D. and integrate it into your issued code?..
https://www.wix.com/velo/forum/coding-with-velo/button-mouse-out-hide-element-after-2-seconds

I’m able to fixed same issue on my site using below code.

$w . onReady ( function () {

$w ( '#RollerShadesBtn' ). onMouseIn (( event ) => { 
    $w ( "#SolarShadesBox" ). show ();  
}); 
$w ( '#SolarShadesBox' ). onMouseIn (( event ) => { 
    $w ( "#SolarShadesBox" ). show ();  
}); 
$w ( '#RollerShadesBtn' ). onMouseOut (( event ) => { 
    $w ( "#SolarShadesBox" ). hide ();  
}); 
$w ( '#SolarShadesBox' ). onMouseOut (( event ) => { 
    $w ( "#SolarShadesBox" ). hide ();  
}); 

});

1 Like