I’m trying to create an open-on-hover Mega Menu for my site my using a Button and the “hide” command which works, but when I try to hover over the now opened megamenu it goes away.
Would anyone have any tips on how to fix this issue? I’m not familiar with Corvid yet. Thank you 
export function MenuButton_mouseIn(event) {
$w( " #Menu " ).show()
}
export function MenuButton_mouseOut(event) {
$w( “#Menu” ).hide();
}
That seems to be right.
This is not enough of INPUT to make some OUTPUT.
Are these all the informations you can give about your project?
No one can see your Mega-Menu and how it is coded!
Hi Taylor
You should hide the menu when you hover away from IT, not the button, try adding the onMouseOut( ) on the menu itself instead of the button.
/* This event handler opens the menu when you hover over it. */
$w('#categoriesBtn').onMouseIn(() => {
$w('#menu').show();
})
/* This event handler will close the menu when you hover away from it */
$w('#menu').onMouseOut(() => {
$w('#menu').hide();
})
You can customize the animation as you want.
Hope it was useful~!
Ahmad
I’ve tried putting in the code you gave me, just confused about the ‘categoriesBtn’. Is that the name of your menu button?
Also, the Menu will pop up but now won’t go away. This is my code, thank you for the help.
export function MenuButton_mouseIn(event) {
$w( “#Menu” ).show()
}
/* This event handler opens the menu when you hover over it if the menu is closed, and close it if it was opened. */
$w( ‘#MenuButton’ ).onMouseIn(() => {
const Menu = $w( ‘#Menu’ );
if (Menu.hidden) { Menu.show() } else { Menu.hide() }
})
/* This event handler will close the menu when you hover away from it */
$w( ‘Menu’ ).onMouseOut(() => {
$w( ‘Menu’ ).hide();
})
export function Menu_mouseOut(event) {
$w( “#Menu” ).hide()
}
That was all the code I have. I’m just trying to make my menu appear when I hover over the menu button and disappear upon hovering out of the menu
You might find the Mega Menu example useful.
Please observe the community guidelines and refrain from multiple posts on the same topic or question.
Will do. the Mega Menu example doesn’t show me code so I still don’t know what to type. Would you happen to know what’s wrong here?
export function MenuButton_mouseIn(event) {
$w( ‘#Menu’ ).show()
}
/* This event handler opens the menu when you hover over it if the menu is closed, and close it if it was opened. */
$w( ‘#MenuButton’ ).onMouseIn(() => {
const Menu = $w( ‘#Menu’ );
if (Menu.hidden) { Menu.show() } else { Menu.hide() }
})
/* This event handler will close the menu when you hover away from it */
$w( ‘Menu’ ).onMouseOut(() => {
( ‘Menu’ ).hide();
})
@catsloveyt The Example Code is displayed right on the the Example page (just scroll down a little to see it). Or, click on the Edit Now button on the example page to open the entire example site in your Editor. You will then be able to see the code, play with it, and make changes.
Hard to tell if your code works as I have no idea how your menu is built. Please see the example, or provide more details regarding your own menu.
@yisrael-wix My menu isn’t build out yet, I’m simply trying to show and hide a container box but I barely know how to code so I can’t tell what to use from your example. I really just need someone to write the code out and I’ll be able to break it down and learn the terms.
If you could help me with this I’d very much appreciate it.
My menu button is defined as “MenuButton”
My container box is defined as “Menu”
All I want is for it to appear when I hover over the button and disappear when my cursor leaves the menu.
Thank you!
@catsloveyt You wrote, " I really just need someone to write the code out and I’ll be able to break it down and learn the terms."
“Someone to write the code”? Then see the Mega Menu example . It is a full example of what you are trying to do. You can play with it and (as you said) “break it down and learn the terms”.
What you are trying to accomplish, a Mega Menu, is not a trivial task and will not be so simple for a beginner. This is why I recommend starting with the example which already has the code you are attempting to achieve. Please realize that you can’t just “copy and paste” code and expect it to work. You need to understand what’s happening if you expect to be able to write code that does what you want.
@catsloveyt Remove the old event handlers from your code, relocate mine inside the page’s onReady( ) event handler.
$w.onReady(() => {
// Relocate my code here
})
@ahmadnasriya You’re SO close thank you! The Menu is only closing when I hover over the button for a second time. Could you spot where I messed up?
Thank you so much, you’ve helped me out a lot.
$w.onReady(() => {
/* This event handler opens the menu when you hover over it if the menu is closed, and close it if it was opened. */
$w( ‘#MenuButton’ ).onMouseIn(() => {
const menu = $w( ‘#Menu’ );
if (menu.hidden) { menu.show() } else { menu.hide() }
})
/* This event handler will close the menu when you hover away from it */
$w( ‘Menu’ ).onMouseOut(() => {
$w( ‘Menu’ ).hide();
})
})
@catsloveyt There’s nothing wrong, it was coded to close the menu when you hover over it (IF THE MENU IS OPENED) and open it (IF THE MENU IS CLOSED).
It’s latterly written in the code with plain English.
@ahmadnasriya What would I replace to have it close when the cursor left the actual Menu?
@catsloveyt I’ve updated the answer!
@ahmadnasriya It says there’s a “Parsing error, unexpected token” on the very last bracket }
@catsloveyt
Then you probably have forgot a braket or curly braket (or you have one to much of them).
Every-time you open a braket, you should also close it.
Just count all of your brakets. There should be the same amount of OPENER and CLOSER -brakets.
@russian-dima I’ve figured out the bracket problem, but the menu still isn’t closing even with the new code @ahmadnasriya put in.
Please, I just need this done i’ve been trying for days. I just need code that works.