> Displaying the Flare TOC as a menu

This topic is generated with the SmartMenuSnippet master page, which embeds the menu using a snippet OutputMenu.flsnp.

In this section

Transform the TOC

Configure SmartMenus

Displaying the Flare TOC as a menu

Introduction

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. ul and 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.

Solution

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