Close Box when mousein on a different button

Ask the community
,
1

986×419 38.7 KB

Hi,

I currently have a box shown above being used as a drop menu.

Using mousein to open, and then closes on mouseout event but only after entering the box and moving away.

Is there a way to close the open box, if the mouse enters a different button field to open a different box? So if moving mouse along the menu line but not actually moving down in to the boxes.

Currently they all just open on top of each other, closing after moving mouse in the box then away again?

code using for each box shown below

export function services1_onmouseIn(event) {
$w( ‘#box1’ ).show()
}
import wixWindow from ‘wix-window’ ;
$w.onReady(() => {
$w( ‘#box1’ ).onMouseOut(event => {
$w( ‘#box1’ ).hide()
})
})

2

Think I might have a solution; but it’s a right work around haha

I have to put hide code in for all the neighbouring buttons to close their boxes!

If anyone has a more “catch all” solution, sure would be a help :slight_smile:

3

I’m not sure I got what exactly you want to do (also there’s a syntax mistake in the export function you posted above).

Any way, you can do something like:

$w.onReady(() => {
$w("Box").onMouseOut(event => {
$w("#" + event.target.id).hide();
})
})
4

If I got you wrong, please add details. :slight_smile:

5

Hi J.D.

I’m planning to use page code with boxes to create a more responsive mega menu …

https://www.diy.com/ (similar to this site)

Currently, I have to enter the open box and mouseout again to close the box.

You will notice in the example website, the megamenus close up even when scrolling mouse from one menu button to the next.

6

I think that in your case, you shouldn’t have so many boxes.
You can have a single box and change the contents inside.
Put a repeater inside the box and assign different data for each tab.

7

I don’t see any syntax errors, placing the code in page not site, a lot more code as have to do for all pages … but I find that using lightboxes as megamenus is just not an option due to the time delays with them opening up, it doesn’t create a good user experience.

I like your thoughts on the repeater!

But how do I show a clear opacity zero data box when no options being selected on the menu?

8

You wrote:
export function services1_ on mouseIn(event) {

instead of:
export function services1_mouseIn(event) {

But never mind.

Re your question, you should put all the tabs of the main menu inside a box (hereafter: “tabBox”);
and do something like:

$w.onReady(() => {
    $w("#tabBox").onMouseOut(event => {
        $w("#submenuBox").collapse();
    })
})

Another thing you can do instead of a single repeater is to use a multiStateBox and change the states on mouse on mouse in (I haven’t tested the performance. It might be too slow).

9

Any way what ever you choose, don’t make the full implementation before testing the performance.

10

What was your final solution here?