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