Mega menu - overlapping

Ask the community
,
1

Hello,

Im having an issue with creating a mega menu essentially oi have 1 of 2 issues.

either

  1. i use a mouseout function but the box menu hides too quickly

  2. i dont use a mouse out and they stay up and over lap eachother.

I am not a coder - and its my first time touching code so please help !

2

Where is your current running (not working) code?
How to help you without knowing what your code is doing exactly?:thinking:

3

export function productButton_mouseIn ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
$w ( “#box14” ). show ();
}

export function productButton_mouseOut ( event ) {
$w ( “#box14” ). hide ();
}

4

this is the version where it hides the box too quickly. if i dont havee this it overlaps with my other box

5

exportfunction productButton_mouseIn ( event ){
$w ( “#box14” ). show ();
}
exportfunction productButton_mouseOut ( event )
{ $w ( “#box14” ). hide ();
}

This is the version where it hides the box too quickly. if i dont havee this it overlaps with my other box

6

1524×747 86.5 KB

7

@natashamonds

  1. Delete your code.
  2. Paste the following one onto your page…( copy&paste )
let animation = "slide";
let options = {
    delay: 0,
    duration: 1000,
    direction: "top"
}

$w.onReady(()=>{
    $w('#btnProduct').onMouseIn(async()=>{ 
        $w('#boxProduct').show(animation, options);
        $w('#boxSolution').hide(animation, options);
    });

    $w('#btnSolution').onMouseIn(async()=>{ 
        $w('#boxSolution').show(animation, options);
        $w('#boxProduct').hide(animation, options);
    });

    $w('#boxProduct').onMouseOut(async()=>{ 
        $w('#boxProduct').hide(animation, options);
    });

    $w('#boxSolution').onMouseOut(async()=>{ 
        $w('#boxSolution').hide(animation, options);
    });
});
  1. Edit all your ELEMENT-IDS, like shown in the code (you have 4x-elements).

  • a) Button-Product → btnProduct

  • b) Button-Solution → btnSolution

  • c) Box-Product → boxProduct

  • d) Box-Solution → boxSolution

  1. Disconnect your generated connections inside the PROPERTIES-PANEL.
  2. Save your project and run a PREVIEW or publish your site and open your website.
  3. Have fun!:wink:

You can change the current running animation for example to…

    1. “slide”
    1. “float”
    1. “fade” …and so on…
animation: "slide" <<---

Of course you also can change the direction:

  • top

  • bottom

  • right

  • left

direction: "top" <<--

You should also consider to use → COLLAPSE & EXPAND, to complete the functionality and let your Mini-Menu working → 100%.

At least you will see the difference, on a mobile phone. You will need to use → ASYNC+AWAIT if you want to improve & expand the functionality of your menu!

Good luck!

8

BTW: Here another Mega-Menu-Example…
https://www.wix.com/velo/example/mega-menu

9

@russian-dima Thank you so very much slight issue is thi

1942×235 26 KB

s

10

@natashamonds
Sorry for the Typo!

Correction → 

let animation = "slide"
11

@russian-dima you have saved me - thank you legend

12

@natashamonds :wink:

13

@russian-dima I got somewhat the same problem as Natasha. 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) It’s driving me nuts. 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 );

}