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.
candeelh
Jr. Propeller Head
Posts: 6
Joined: Mon Jul 17, 2017 12:52 pm

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

Post by candeelh »

My client has asked me to produce a layout exactly as you have described, and I'm running into the same issues you experienced. Were you ever able to find JavaScript code that worked for you? If you did, can you please post the link here?

Thank you so much!
Candee Hellberg
Freelance Consultant
:flare: :wink:
AlexFox
Sr. Propeller Head
Posts: 241
Joined: Thu Oct 19, 2017 1:56 am

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

Post by AlexFox »

You can explicitly set the skin you want a topic to open in from the TOC. Right click on the entry > Properties > Advanced > Open in Skin
Post Reply