Before you start creating
[Menu Proxy — Headings — Online — Depth3 ]
Limit the Number of Menu Items
For Top Navigation output, the menu at the top of pages is based on the structure and contents of your TOC file in the Project Organizer. But this menu has a design that emulates a modern website, not a traditional Help system. Therefore, you should try to limit the number of TOC books and entries under them. Following are a few ways to deal with this issue.
Keep First-Level Items Few and the Text Short
When your first-level TOC items are more in number than the width of your content can handle, they wrap around to the next line.
This will work, but it looks cleaner to have a single row of menu items at the top. Therefore, you should limit the number of first-level books and items in your TOC file. Also, if you keep the text for those items relatively short, you can fit more of them in a single row. We recommend keeping the number of first-level menu items to six or fewer. This may require some reorganization of your TOC file.
Set the Menu Depth Level
It is recommended that you try to have no more than three levels of menus (the root menu and two submenus) at the top. This is the default setting on the Setup tab of the Skin Editor.
Having too many submenus extending from the top menu can be overwhelming.
Restructure the TOC
Restructuring your TOC might be where you spend most of your time in preparing for Top Navigation output. It is a good idea to reorganize longer lists of books and entries in your TOC file, limiting the number of items under a book to around 10 or fewer.
Example You have a section of your TOC that contains lots of books and entries at the same level, like this:
For a better result in Top Navigation output, you might restructure it so that it looks more like this:
Of course, by using smaller fonts, more items can fit on the screen, but you should still try to limit the number of items in order to prevent them from disappearing off the edge of a smaller monitor. This is true at least for items that are displayed in the top menu. For books that are at deeper levels of the TOC (e.g., level 4 and beyond), it is somewhat more acceptable to allow longer lists of TOC items because a context-sensitive side menu is better able to display long lists.
Remove Items From the TOC
When looking at your TOC file, you might find that you have several topics that do not need to be included in it. Perhaps you decide to keep only the most important topics in the TOC, removing the others. When you generate your output, the most important items will be accessible in the top menu and context-sensitive menus (if you include them). As for the lesser topics you removed, end users can still find those by using search or from links found in other topics, which is what they will most likely do anyway.
Turn Off Top Navigation
Although this kind of output is called "Top Navigation," it is designed to work responsively, changing its layout if it is being viewed on smaller device such as a tablet or smart phone. When this occurs, the top menu is replaced with a flyout menu on the side.
This kind of layout is better able to display longer lists of TOC items that would not look as good in a top menu.
If you would like this kind of layout for larger browser windows—as well as for smaller tablets and mobile devices—you can turn off the top navigation altogether via the responsive output settings. To do this, open the Target Editor, select the Skin tab, and set the Tablet Breakpoint to a very high number. Doing this displays the output on extremely large monitors the same way that it looks on small tablets (i.e., with the side flyout menu instead of the top navigation menu). This workaround is probably the easiest way to deal with a long TOC without having to make changes to it.
Use Side Navigation
If you decide that you simply do not want to adjust your TOC, you might consider using Side Navigation instead of Top Navigation output. With Side Navigation, your TOC can be as long as you want and it shouldn’t make any difference because the navigation will be on the left or right side of the screen, instead at the top. See HTML5 Side Navigation Output.
Avoid Duplicate File Names When Importing
You might decide to create a new project from
Consider the Width of Content
If you decide to use Flare's project templates as a basis for your new Top Navigation output, you will notice that we've made the main content area somewhat narrow on the left side of the context-sensitive menu, with content wrapping under the menu.
It's a nice look, but it also means that you might experience issues if you have extra wide content, such as big tables. You probably won't have an issue if the wide content in question wraps under the topic menu. But if you have a long topic menu on a particular page due to the number of related links in the TOC, you could have a challenge displaying the wide content properly.
If this is the case, you might consider either changing your content so it does not require so much horizontal space or making the content area wider. If you want to change the width, you can use the "Inspect" feature in your browser to see which style is influencing that look. With a topic in the output open, right-click in the browser and select Inspect (the option might be somewhat different depending on your browser).
As you hover over styles in the code that is shown, different parts of the output will be highlighted. If you hover over this:
<div class="row outer-row sidenav-layout"> == $0
You will notice that the output is highlighted like this:
Then, on the right side, you will see this:
So you can open your stylesheet in the Internal Text Editor and add the following, increasing the value of the max-width property:
In this example, we increased the max-width to 85em, and as a result the content in our output now looks like this:
Duplicate TOC Items
If you generate HTML5 output, links to the TOC (e.g., menu items, breadcrumbs, mini-TOCs) are dynamically generated when a particular topic is opened. This lets you keep these navigation elements in sync with your TOC. This is particularly important if the same topic is linked to multiple entries in your TOC; otherwise, menu items and other navigation elements might display for one instance of that topic in the TOC when another instance is preferred.
For HTML5 Tripane output, navigation elements will always remain in sync with your TOC entries. However, for HTML5 Side Navigation, Top Navigation, and skinless outputs, you must enable a feature in your target to synchronize navigation elements with TOC entries.
Synchronizing navigation elements with your TOC entries seems like an obvious decision, and for some authors it is. However, other authors might choose not to do this for their Side Navigation, Top Navigation, or skinless outputs. There are pros and cons.
See Synchronizing Navigation Elements With TOC Entries.
Note If you decide not to use this option for your HTML5 Side Navigation, Top Navigation, or skinless output but you are still concerned about having duplicate TOC links, there is a workaround. You can create a snippet that holds all of the content for the topic. Then create multiple topics (as many topics as you need links to it in the TOC), and insert that snippet into each one. Rather than linking to one topic in multiple places in the TOC, you can link to a different topic in each place. By doing that, your navigation elements will point to the appropriate locations. You probably want to disable searching in all but one of those topics; otherwise, they will all show up in the search results
