Append HTML side menu page navigation being placed in a DIV that i can't properly find the right edge of.

Question

I've been trying to add a navigation menu that slides out from the right when triggered to an HTML5 project through the Append HTML option in the resources but doing so places the code from my HTML doc within the <div id="container"> element. For some reason when I use CSS to tie the location of the menu to "right: 0px" (or any other value) and "position: fixed" (so that its based off the viewport and not the parent DIV) similar to how the right navigation button generated by in5 works, my menu doesn't seem to know where that is, or its at least its not accurate at all. changing the window size by scaling Chrome has the menu sliding left or right across the screen at what seem like twice the rate of any of the other elements.

Simply put, is there any way to change which DIV element the appended HTML is placed within? It would either need to be one element up in the <div id="container-wrap"> or one element down in the <div id="page"> element. I've also tried using JS to add the html within the correct DIV but it seems appending JS with my script didn't add it to the html files on export so i think i misunderstood how that would work.

I'm exporting with the Desktop scaling set to Best Fit, since these items are intended for multiple screen sizes including iPads and windows mobile tablets. the document file size is 1024x768.

Heres my menu files that i'm appending to my documents. any help would be appreciated!
https://www.dropbox.com/scl/fo/13ua3e2y0g92eivohvux2/h?dl=0&rlkey=rclxn1z6mdm355akb45rjik33

Comments

I figured out a method to get this to work. By defining the position as fixed for the menu and setting the left position to the right edge of the document and the width to 0px (left:1024px; width:0px) it stays at a constant position. then the JS adjusts both the left position and the width at the same time, creating the illusion of it growing from right to left, when in reality it is moving 350px tot he left, and growing in width 350px to the right.

---

Nice! You might also be able to target items if you're working with Object Styles, by assigning a class in the Edit All Export Tags dialog box in InDesign. Glad you got it figured out.