Wix Mega Menu

Ask the community
, ,
1

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 ();
}

2

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

3

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

4

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 ();  
});

});