Menu container appear and disappear

Hi Code Gods,

Could you please help me with this:

I want the menu container (container1) to appear when someone hovers over the hamburger (shape5) and that is working fine - yay for me!

However, I can’t get the container to disappear when someone hovers off the container or clicks a menu button. Not sure what to do or where I’m going wrong…

This is my code so far… and here’s the url https://kbwebs.wixsite.com/sydneysoiree2 .

export function container1_onMouseIn(event) {
//Add your code for this event here:
}

export function container1_onMouseOut(event) {
$w(’ #container1 ').hide();
}

export function shape5_mouseIn(event) {
$w(‘#container1’).show();
}

Thanks in advance for your help. Kate
:heart:

Update: I now have this working, but you can’t click on the drop downs.


Here’s my code:

export function shape5_onMouseIn(event) {
$w(‘#container1’).show();
}

export function container1_onClick(event) {
$w(‘#container1’).hide();
}

export function horizontalMenu1_onMouseOut(event) {
$w(‘#container1’).hide();
}

The red box is container1 (it will be clear).
The white box behind the menu is container2.

I thought If I made container1 bigger, it would work, but the code thinks that when you roll off ‘our concept’ towards the dropdowns, that is MouseOut. Any suggestions?

Update: OK, I think I’ve nailed it. https://kbwebs.wixsite.com/sydneysoiree2/tickets2

Well, nearly nailed it. It appears that the onMouseIn command to the hamburger menu doesn’t work as soon as you start scrolling down the page.

Is this because the code is all in the “site” folder?

Perhaps I need to replicate it on the “page” folder.

Is that what you do?

Here’s the link again. The problem was observed using Chrome on desktop.

https://kbwebs.wixsite.com/sydneysoiree2

Hi Kate,
It looks like an issue on our end. Looking into it.

Ohad, Derrick from Citisonship Design fixed if for me. The problem was caused because of the animation. So apparently, you can’t use the standard Wix animations.

Instead, you have to add the animation to the code like this:
export function shape5_onMouseIn(event) {
$w(‘#container1’).show(“FloatIn”);

I’m disappointed in my lack of knowledge. This wasn’t obvious from any of the tutorials.