Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


EPUB Interactive Elements no longer interactive after overlay

New Here ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

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 😞

 

TOPICS
EPUB, Publish online

Views

128

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

You cannot stack interactive items without winding up with unreliable results.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

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).

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 08, 2021 Jun 08, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines