Modifying the Top-Nav Skin for a Custom Flare Layout

One of the problems with Flare 11's Top-Nav skin is that the menu isn't really suitable for a long table of contents due to the limited amount of space. That's led a lot of people, including me, to look at alternative approaches, and in this post, I will look at a solution I used on a real project.

The screenshot above shows a sample page from the project. It doesn't look like the top-nav skin, does it? In fact, it looks more like a customised tri-pane, but let me assure you it is a top-nav. The changes I have made are:

• The header has a much reduced height, so that it is just big enough to contain the mobile menu icon in the top-left
• There's a header banner, which contains a background image
• A search proxy is used to add Flare 11's search tool
• The help uses the full width of the page
• The toc is replaced with a jQuery smartmenu, which gives us an accordion-style vertical expanding menu.

There is a customised footer too, but it is off the page in that screen shot!It looks like a Tri-Pane, so why did I use the top-nav skin for my custom Flare layout? Because I wanted to keep the slide-in mobile menu and a frameless layout. Ideally, I would have liked to have used a skinless approach, but there's no mobile menu proxy and I didn't have the time to look into implementing that in code.

Smartmenus in Flare

The most noticeable difference with this layout is that it uses an accordion menu instead of the top-nav menu. It works as an expandable menu, similar in style to the traditional books and topics that you find in Flare's tri-pane. But as you can see, it looks more in-keeping with menus you find on all sorts of web sites, which is a big deal for my clients - 'can you make it look like our web site?' is such a common request, and people are not so keen on the old-school books and topics. And best of all, it is created during the build process, from the TOC, and doesn't require any post-build adjustments. Set it up, build your target, and out it comes. Easy.But how do you get this to work in Flare? Well, you need to use jQuery smartmenus, which you can find at http://www.smartmenus.org/, but as we are using it in Flare, some extra work is required. For that, I am going to refer you to a discussion I had with Dave Lee (a very helpful Flare professional who runs a blog at https://ukauthor.wordpress.com/). The discussion appears here in the MadCap forums, and in it, Dave explains how to set up smartmenus. Once they are in place, you need to add a couple of references to the smartmenus in your Masterpage, and also a little bit of javascript (which Dave also provides) and then you are ready to go.The Masterpage is also where I created the divs to contain the smartmenu, and other layout features such as a header div and footer div either side of the body proxy, and I also added the search proxy. All that remained after that was to edit the skin so that the header didn't contain a logo and became a narrow strip across the top. You can do this with Flare's skin editor, so nothing out of the ordinary.With all that in place, you just build your target in the same way as any other Flare. Flare builds the smartmenu from the toc, just like it builds the top-nav menu or the old-fashioned books and topics hierarchy. If you want to customise the appearance of the menu, as I did, you just edit the styles in the two css files for the type of smartmenu you have chosen. These are stored in the smartmenus folders you added to your project, so can be setup pre-build too.

Compromises

My clients really like the smartmenus. They work just like the old-fashioned TOC, but get away from that 'help' look. But there are some compromises - you don't get the Index or Glossary tabs, but perhaps with a bit of thought, the index and glossary could be added to the TOC somehow - that's an idea for another day.