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
Apply top nav on home page and side nav on all other pages
-
- 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
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).
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).
Re: Apply top nav on home page and side nav on all other pages
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.
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.
Re: Apply top nav on home page and side nav on all other pages
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!
Thank you so much!
Candee Hellberg
Freelance Consultant
Freelance Consultant
Re: Apply top nav on home page and side nav on all other pages
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