This topic is generated with the SmartMenuSnippet master page, which embeds the menu using a snippet OutputMenu.flsnp.
This project is an example of producing a menu control for a skin-less HTML5 help design; by skin-less, I mean the topics are displayed stand-alone without the HTML5 skin.
One problem with this approach is that you don't have the skin navigation pane, so you need to include your own navigation control.
I investigated a number of menu controls, and found one I liked called SmartMenus (http://www.smartmenus.org/), which is used for the menu displayed above.
To display a menu using SmartMenus, the menu structure needs to be in a simple HTML list; i.e.
li tags, which contain hyperlinks. The SmartMenus plugin then converts this list into a menu.
As I had already designed my TOC in Flare, I just needed to find a way to convert my Flare TOC file (*.fltoc) into a HTML list, so that SmartMenus could render it as a menu. To do this conversion, I used XSLT, which is a way to transform XML into HTML.
Once I had generated the menu using XSLT, I then added it to the topics in my project by using a master page.
This example can be downloaded as a zipped Flare project here (right-click and save):
The project will show you how to:
Dave Lee | Blog | Forums | 12/08/2014