EPUB Interactive Elements no longer interactive after overlay

Forum|Forum|4 years ago
June 8, 2021
3 replies
310 views

In my ePUB I have a flyout menu to help navigate around it, this works like a website menu and pops out and disappears.

The issue I'm facing is my interactive buttons work fine, up until the menu flies out and closes, then they don't work. My guess is, the menu elements sit on top of the interactive buttons (I have the flyout menu as a master page then other master pages are based on the flyout menu master) on my page, stopping the user from clicking them, even though I have the 'close' button set up to hide the flyout menu elements.

The buttons work if I layer the interactive buttons on top of the flyout menu (in the layers panel) but then the buttons still appear when the flyout menu is activated.

https://indd.adobe.com/view/9975f0ae-1999-4f6b-95de-bd2e306ef2e9

I cant think of any solution other than changing the design and having a 'back to contents page' button 😞

This topic has been closed for replies.

Diane Burns

Inspiring

I think this may be resolved by using Show/Hide button for the menu icon. Possible to post file? Don't need images.

rayek.elfin

Legend

The cause is a div element that is placed on top of the entire canvas after opening the menu.

It can be solved with a custom css property pointer-events:none; assigned to that container, but users will be able to click "through" that overlay and still interact with other elements.

Ideally you would write a simple javascript function to control this property.

It might also have something to do with you not removing that container after closing the menu. Try animating it out of view when the close button is clicked (to add multiple animations, use an additional group).