How to make a menu triggered by a mouseIn event stay while being hovered?

Ask the community
,
1

Hello,

I’m trying to make a custom drop down menu using mouseIn and mouseOut events. The code I have works fine in terms of showing and hiding the menu when the cursor hovers over the button to trigger the drop down menu. What I can’t seem to figure out is how to make the menu stay shown while the cursor is on the dropdown menu. As soon as the cursor leaves the button the menu disappears leaving the user not being able to access the drop down menu. Any tips on what code I need to write in order to make the custom drop down menu stay when the cursor leaves the button and is hovering the actual menu? Any advice would be highly appreciated!

export function button_mouseIn(event) {
  let fadeOptions = {
  "duration":   250,
};
  $w("#menu").show("fade", fadeOptions);
}

export function button_mouseOut(event) {
  let fadeOptions2 = {
  "duration":   250,
  "delay":      1000
};
  $w("#menu").hide("fade", fadeOptions2);
}
2

It is always good to see a pic of your menu and how it is constructed.
You can provide a pic of your menu including the button?

  1. expanded/shown - menu
  2. collapsed/hidden - menu
  3. Does your menu also have submenues?
3

Thank you for replying so fast! I circled the menu button in question because the screenshot did not capture the cursor. The button has a submenu which is the part I’m struggling with to keep it shown when the cursor leaves the button to go to the submenu

1536×864 34 KB

1536×864 23 KB

4

So now, when i could take a look onto your wished function, my question would be…

Why you want to close your submenu, when hovering out of the button???

So the logical steps would be…

  1. User see your collapsed menu at the beginning (only the white colored menu is visible at this moment)
  2. User hoovers over the menu-buttons (HOME/NEW_ARRIVALS/WOMEN-MEN…)
    and while the user touches one of the buttons the submenu expands and gets VISIBLE.
  3. Let’s say now the user is hovering over the WOMEN-BUTTON and the WOMEN-SUBMENU is opened at current time.
  4. Now user changes his choice and hoovers to another menu-button, for example → “MEN”. What happens in this moment?

RIGHT, user do hoovering out of the previous butto, but you already want some actions at this current position? → I don’t think you already need any actions, because the hoovering-out-process shouldn’t do anything, the submenu should just stay in place and should still be open.

  1. Now comes the moment, when the user hoovers over the second BUTTON → “MEN”. What happens now? → RIGHT → Now you menu should shange.

If you are using a MULTI-STATE-BOX, then at this moment, all what would happen is just the change of the current STATE of the MULTI-STATE-BOX.

If you don’t use a MULTI-STATEBOX, then you wil have to change all element-values manually (by code).

  1. And now the most important moment → USER LEAVES the MENU.
    What happens here? → Now you want your menu to be closed right, because the user navigated out of menu-range.

Now you surrely want your menu to be hidden again.

Conclusion: So it is not the triggered event of the button, instead it is the triggered-event of the Menu-Box itself, which start the hide-process / collapse-process.

WRONG ?

export function button_mouseOut(event){
	$w("#menu").hide("fade", {"duration":250,"delay":1000});
}

RIGHT?

export function menu_mouseOut(event){
	$w("#menu").hide("fade", {"duration":250,"delay":1000});
}
5

I really appreciate your response! My problem is that the menu closes before the user can navigate to it. When the user leaves the button the menu closes. How would I get the menu to stay open when the user is in the menu range?

I’ve attached a video to better show the problem I’m struggling with

6

Sorry, just saw, that i did a COPY-PASTE-ERROR…

Why your menu closes before user can navigate onto it?
Which line of your code is the reason for this behaviour?

Try this simple code here…

When hoover over Button → submenu opens
When hover out of submenu → submenu closes

Replace your menu-code with this one.

$w.onReady(()=>{
    $w('#button').onMouseIn(()=>{
        $w("#menu").show("fade",    {"duration":250,"delay":1000});
    });
        
    $w("#menu").onMouseOut(()=>{
        $w("#menu").hide("fade",{"duration":250,"delay":1000});
    });
 });
7

Thank you so much! That fixed it perfectly. Thank you again for your help!