Need solution to Hide a Dropdown Hover Menu on Page Exit / Change

Hello,

Does anyone know of a way to close a hover box shown on all pages when exiting / changing pages? We have a custom dropdown menu - the GET INVOLVED link on the main menu here: https://www.asecfw.org/

When a user changes pages from that menu, the menu stays active / is shown on the next page unless the user moves the cursor out of the dropdown box.

We’re looking for a solution to this issue please. Let me know if you need any further information.

Here is the current code:
export function getInvolved_mouseIn(event) {
//$w(‘#getInvolvedNav’).show(“FadeIn”);
//$w(‘#getInvolvedUpArrow’).show(“FadeIn”);
$w(‘#getInvolvedNav’).show();
$w(‘#getInvolvedUpArrow’).show();
}
export function getInvolved_click(event) {
$w(‘#getInvolvedNav’).show();
$w(‘#getInvolvedUpArrow’).show();
}
export function box5_mouseOut(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
//$w(‘#getInvolvedUpArrow’).hide();
//$w(‘#getInvolvedNav’).hide();
}
export function mainNavBox_mouseIn(event) {
}
export function button10_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function button12_mouseIn_1(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function button31_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function button30_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function button29_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function Logo_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function mainNavBox_mouseIn_1(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}
export function hoverOutBox_mouseIn(event) {
setTimeout( function () {
$w(“#getInvolvedUpArrow”).hide();
$w(“#getInvolvedNav”).hide();
}, 5);
}

Thanks!
-Sarah

You can do a simple option of just putting code into your pages onReady function that makes sure the Get Involved element is not shown when the page loads.

Something like this below and assuming your element is called #getInvolved

$w.onReady( () => {
$w("#getInvolved").hide();
});

It would have to go in your site code tab so that it would apply across your whole site.

Otherwise nice site :+1:

Thanks! That’s the piece of code I was missing. Works like a charm. Much appreciated!