on hover state persisting after new page load for mega manu

[halliew]

Hi there -

I have created a megamenu across the top navigation items on my site and sometimes (but not always) it stays open after I navigate to another page.

To create the megamenu, I created a text box for the navigation item that on hover turns on a container below that contains my megamenu. The megamenu container also has the properties that on hover it stays visible. For the navigation item text box and any active links contained in the megamenu, I set properties that onclick, megamenu state is turned off so that the megamenu goes away and resets when the user navigates to a new page. This works sometimes, but not always, and it seems to stop working at the worst time, such as during usability testing with the prototype.

Is this a bug or have I done something wrong?

thanks,
Hallie

[Nick Jennings]

Hi Hallie,

It appears that we are working to resolve this with you off the forums. Please let us know of any updates.

[Zakin]

I have the same issue with a very complicated, multi-level, nested menu.

Here's the issue as I see it:
When the page loads, the state command information is loading before the images and getting stuck in "on" state.

So, when I click on a link with a hover state, leaving the mouse where it is, the "on" state is set when the page loads and gets stuck. If I move the mouse off the nav during the page refresh, all is good... but it's hard to tell someone doing user testing to move the mouse after you click on the link. Moving the mouse to a neutral spot on the page during the refresh fixes the problem but it's hacky.

I hope this makes sense.

[Nick Jennings]

Hi,

That would be the correct behavior for any mega menu in a template or that uses a global state. This lets the set value persist between pages.

The easiest way to avoid this is to have the On Click for states set the value back to the default. This will force the menu to become instantly hidden and will keep it hidden when then next page loads.

You could also use an Advanced HTML component and create a script to reset specific states when the page loads, but that can get complex and might take some time to set up.