Apply top nav on home page and side nav on all other pages

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Delan23
Jr. Propeller Head
Posts: 2
Joined: Thu Apr 20, 2023 6:07 am

Apply top nav on home page and side nav on all other pages

Post by Delan23 »

Hi,

I am preparing some mockups of HTML5 outputs (side navigation and top navigation) to discuss future HTML5 outputs with my management.

In this context, I want to create an HTML output that includes all the documentation on a product. This is currently stored in a single MadCap project (I use snippet conditions instead of standard conditions to be able to generate a consolidated output of all my manuals into a single HTML output).

I'd like to have a home page with a top navigation layout, and then apply a side navigation layout on all topics below the home page.

I found this interesting discussion on the user forum: viewtopic.php?p=144199#p144199 and I tested the suggested solution: I specified the skin name in topic links.

It works but:
- Users have to select the side navigation skin themselves from the topic toolbar.
I would like the side navigation skin to be automatically applied when a user opens one of the links accessible from the top navigation page (top topic of a manual or any other link on which I specify the skin name), as well as all topics below.
- When I click the company logo to come back to the home page, the side navigation skin is still applied.
I'd like the top navigation skin to be automatically applied back when users go back to the home page.

Do you know whether and how I could set this up in the same MadCap project (and ideally in the same HTML output)?
If it turns out that it is not applicable, would you recommend an alternate solution?

Thanks in advance for your help.
Delan
ajturnersurrey
Sr. Propeller Head
Posts: 346
Joined: Fri Nov 05, 2010 3:30 am

Re: Apply top nav on home page and side nav on all other pages

Post by ajturnersurrey »

One suggestion for an "easy" option that I have gone with in the past.

Set up sidenav only, but don't display the sidenav menu on the home page by setting the relevant area to display:none; in a home page specific stylesheet. Then include your own top level menu "buttons" across the top of the home page topic or master page. Using a bit of javascript you can move these into the area that you would expect to find the topnav menu headings.

Pro: straightforward to set up and maintain
Con: you won't have dropdowns under these home page "buttons" (at least not without putting in a lot more effort).
Delan23
Jr. Propeller Head
Posts: 2
Joined: Thu Apr 20, 2023 6:07 am

Re: Apply top nav on home page and side nav on all other pages

Post by Delan23 »

Hi,

Thanks for the workaround, as well as for mentioning the pro and con. I'll have a try, and I'll google to find some Javascript code, or ask developer colleagues as I am not familiar with Javascript.
Post Reply