Page Navigation on Multi-page web

Question

I'm working on making a navigation for digital ebooks, my first method was using the in5 menu builder, using the sliding door option. It works fine based on my TOC bookmarks, however for documents with a good number of bookmarks the builder by default creates a menu that extends below the page. From there, i copied the group with all the buttons for the navigation and pasted it into a frame the height of the page and made it scrollable. The issue with this method is that you have to re apply 2/3s of of the button actions the menu builder created, specifically Animation and Show/hide menu actions.

Is there a way to edit the default text frame/button sizes as well as the gap thats created between them? by changing one frame/button's height to be auto sized with a minimum height, and resetting the object style based off that i was able to create a menu with different sized buttons, but they retained the default space between centers of the buttons, making the gaps even bigger. i havent found a code/script file that i can edit for this as of yet.

My second method was putting the TOC in a sliding window housed on a parent page, but obviously that didn't work since parent pages can't have links.

My next method of making a TOC navigation is to use CSS and JS to generate a navigation based on the info and linked video in this post:
https://ajarproductions.com/pages/products/in5/answers/2408/custom-css-navigation-links-to-pages

The issue there is when exporting to Multi-page web, each page has its own HTML file and therefor the script only picks up the bookmark data from the current page. how would i go about editing the code Justin provided in the example to pickup all the bookmark data for the document, and therefore make one navigation with all the bookmarks collected?

Answer 1

There is a way to continually update the space between the frames, after a size adjustment has been made. I generally set the auto-size of the text frame to grow in height only and from the center up and down (see image)... and build that into my object style. Once the text has been updated in the frames, they will adjust their size.

Next, select all the frames, go to Window > Object & Layout > Align and go to the bottom of the panel under Distribute Spacing (if you can't see that option, choose Show Options from the panel menu). Select Use Spacing and set the amount to zero (0). Select all your text frames in the menu, and click the little diagram for Distribute Vertical Space.

Run the Distribute Spacing after each adjustment to the individual text frames.

Comments

but the distribution options can't be set in the object styles, which means i would have to adjust each time, making it not exactly the solution i'm looking for with my workflow. Furthermore, since when i generate the menu initially, any bookmark after #14 (i expect to be making books with far more chapters/sections than 14 on a regular basis) appears below the working space of the document, the distribute action doesn't seem to affect them properly, and there size and placement become quite a bit worse. without being able to change the way the they are generated this might not be the option i go with. i think a code based solution might be the best option but i'm not sure how to capture the data-bookmark info across multiple html pages. however thank you for the options!

---

right now i'm trying to get the following code set to pick up all the data-bookmarks from the project and use that info to generate a menu, but i'm having a hard time understanding jquery.

$(function(){

var ul = $('body').append('<nav id="menu"><ul></ul></nav>').find('nav#menu > ul');

var li, pos;

$('.page[data-bookmarks]').each(function(index,elem) {

pos = $(elem).index() + 1;

li = ul.append('<li><a href="javascript:nav.to('+pos+');">' + $(elem).attr('data-bookmarks') + '</a></li>');

});

$('nav#menu').css('width', $('.page').width());

});

 the .page attribute seems to indicate it is only going to look at the current html page for its data-bookmark info which is the case, each page on export only has a link at the top referencing the bookmark for that page if it has one, and im guessing because the one the nav.to is written it always links back to the first page. removing the .page bit doesnt make a difference

---

I will admit that this is far beyond my knowledge and hopefully someone will be able to contribute extra insight (or code!).

You might also want to consult with one of our Certified in5 Professionals to see if they can help complete the menu issues. Keith Gilbert may be able to help with that: https://ajarproductions.com/pages/products/in5/certified/keith-gilbert.php

---

i will reach out to him and see if he can help!

---

Excellent... feel free to reach back out with any other questions.

---

so i haven't figured out the automatic menu building part yet, but i made a HTML/CSS/JS menu that i append on export. it works fine on desktop with Chrome and Safari, but seems to break on iPad when exported to multi-device web app or iPad web app. i've sent an email to the contact with a link to the HTML and CSS files, but i'll include them here incase y'all can help too.

https://www.dropbox.com/scl/fo/13ua3e2y0g92eivohvux2/h?dl=0&rlkey=rclxn1z6mdm355akb45rjik33