Craig Wright is an experienced technical writer based in Chesterfield, UK. He hates writing about himself in the third person, so I shall stop now.
Always interested in new content writing opportunities. Remote working preferred.
NOTE! This solution only works for versions of Flare that are older than Flare 2017 r2. This is because Flare 2017 r2 has a different way of handling the toc and minitocs. But the good news is that Flare 2017r3 had an update that made an accordion menu possible. For details on that, see Accordion Menu for Flare 2017 r3.Have you ever wished that MadCap Flare could create a HTML5 output that has the good looks of the Top Nav skin, but with the layout of the Tri-Pane and a modern, accordion menu for the table of contents? I know I have, and so have my customers. Several clients have asked "Can't you make it look/work like our web site?". It has been a problem, because most modern web sites use some form of accordion menu and that's not really possible with Flare, not out-of-the-box anyway.But it is achievable, and in this series of posts, I'm going to share how to create the following layout, which was created by Dave Lee (https://ukauthor.wordpress.com/).
I commissioned Dave to create this layout as when I first tried, I just couldn't get it to work. Dave has more knowledge of Foundation and JQuery than me, and was able to achieve so much more, and explain it all to me too.If you are wondering why I am going over this layout again, when I posted a smartmenus solution before, let me provide a quick update. The smartmenus solution works fine if you don't use a Flare skin, but then you don't get the slide-in mobile menu. There are ways to work around this, and Dave set it up to have the toc menu show above the content on mobile. That's fine if you don't have a lot of books in your content, but my client's projects are huge and so having a large menu before the content isn't particularly user-friendly. They prefer the slide-in menu, and for large projects, I agree it is a better option. Unfortunately, the smarmenus solution does not work properly when it is used with a Top Nav skin. I'm not 100% sure why, but other Flare users have experienced the same problems - the smartmenu accordion doesn't expand properly when sub-menu options are selected and the page is re-loaded. I can only guess that it is some sort of conflict between the smartmenu and the foundation off-canvas slide-in menu that is included in the Top Nav skin (the slide-in mobile menu).
Let's have a look at the basic layout that we need. In the screenshots shown, the interface has been customised for general use by Dave, and I'm going to need to modify it a little, so will cover that in later posts.The first screenshot shows the layout on larger screens:
As you can see, there is a header that contains a search bar, a left-hand side panel which contains the contents as a multi-level accordion menu, and a main display area that contains a breadcrumb and the body content. At the bottom of the layout, there is also a footer area (shown below).
The next screenshot shows how the layout appears on smaller devices, such as smartphones:
At small sizes, the accordion menu disappears and is replaced by the mobile menu (drill down slide-in menu), which is accessed via the 'hamburger' icon in a title bar at the top of the screen. When a user selects the 'hamburger' menu, the contents menu slides into view from the left of the screen, just like it does with Flare's Top Nav output.
Creating this layout requires quite a bit of work, which is why I'll be explaining it in a series of posts rather than one. But I'll give a quick overview now, so that more tech-savvy readers can see what was done and go away and try for themselves.
When all of that is in place, you can work in Flare in the usual way, creating topics and building your TOC. When you build and display the output, it will be shown in the customised Accordion+Drill Down Side Menu layout.In full series of posts, I will look at the steps in the process in more detail.Next, I will explain how to add the full Foundation framework to a Flare project and how to set up your project to use it. See the next post in the series: Accordion Menu in MadCap Flare - Part Two.
Craig Wright is an experienced technical writer based in Chesterfield, UK. He hates writing about himself in the third person, so I shall stop now.
Always interested in new content writing opportunities. Remote working preferred.
Registered Number: 08029184
Straygoat logo design by Bristol graphic designer, Nik Jones.
© Straygoat Writing Services Ltd.