Accordion Menu in MadCap Flare - Part Two

This post is the second in a multi-part series of posts that explain how to add a Foundation accordion menu and drill-down menu to a skinless output in MadCap Flare. The output will use a layout that looks like this:

Flare with Accordion Menu

If you missed Part 1, you can see it here:

Now, back to business.

MadCap Flare and the Foundation Framework

To get the accordion menu, drill-down menu and off-panel canvas to work in Flare, we need to use the Foundation framework. The Foundation framework is a free resource for web design and it includes a grid (for layout) and lots of cool features, including the menus I mentioned.Since Flare 10 (I think), MadCap Flare has included a sub-set of the Foundation framework and it is used for controlling the layout. This sub-set is used in HTML5 outputs. Unfortunately, the sub-set does not include the menus we want, and so you need to download the full Foundation framework and use that instead. For our customised layout to work correctly, it is really important that the Target skin is set to (none), because if a skin such as the Top Nav is selected, Flare will use the built-in sub-set of Foundation and it will clash with the full Foundation framework.Next, I'll explain exactly what you need to download, where you need to put the files, and what you need to do with the Target and Skin files.

Set Up Flare to use the Full Foundation Framework

To set up Flare to use the full version of the Foundation framework:

  1. Browse to http://foundation.zurb.com/.
http://foundation.zurb.com/
  1. Select Download Foundation 6.
Foundation Download Page
  1. Select the Download Everything button in the Complete column. The framework downloads as a compressed file.When the download is complete, you will see that the compressed file contains a css folder, a js folder, and an index.html file. The css folder is where the foundation stylesheets live, the js is where the Foundation javascript script files live, and the index.html is just a html file. Leave this Windows Explorer window open for now.
Foundation Framework Download
  1. In Flare, create a new HTML5 project. Select File > New Project to run the wizard, and then set a project name and folder (these can be any name and any location you want to use). When you are prompted to choose a Source, select New from Template and Factory Templates>Online & Print>Top Navigation and PDF Advanced. For the Target, select HTML5-Top Navigation.
  2. When the project is created, right-click on the Resources folder and select New>Folder to create a new sub-folder. Name the sub-folder: foundation.
  3. Back in Windows Explorer, select the Extract All option and set the Destination to the foundation folder you created in the Resources folder in Flare.
Foundation Files added to MadCap Flare
  1. You should see the index.html file and the js and css folders from the Foundation download are now in your Flare project. Now that they are in place, you can reference anything in them from the project's Master Pages. More on that later.If you wish, you can remove the default files and folders that are included in the Top Nav HTML5 project by default (A_Getting Started, B_Links and Lists, etc.,) but for this post, I'm going to leave them in place.
  2. In Flare, select Project Organizer and browse to Skins.
  3. Right-click on the Skins folder, and select Add Skin.
Add Skin
  1. Select the New from Template option and choose the HTML5 Component - Menu skin. Leave the Folder set to to (root folder) and set the File Name to Menu. If you want to use a different name for the skin file, you can - it is just that, later on, you will need to alter a reference in a script to match. Select Add to create the skin.
  2. Repeat the previous step, only this time create a HTML5 Component - Search Bar skin named SearchBar.
  3. Using the same process, create a HTML5 Component - Search Results skin named SearchResults.
  4. Select Targets>Online Output and double-click on the HTML5 Top Navigation (Primary) Target.
  5. In the Target editor, select Skin and set General Skin to (none), Menu skin to Menu.flskn (or whatever you named the SideMenu skin), Search Bar to SearchBar.flskn, and Search Results to SearchResults,flskn.
General Skin is (None)
  1. As I've already mentioned, it is really important that you set the General Skin to (none), otherwise this customised layout will not work. Have I stressed that point enough now? Good :)
  2. Save the Target.

UPDATE: The foundation.css file in the download is missing a line that will make our Foundation menus project work on iPhones and iPads (iOS). I have included a fixed foundation.css file in Part Six, so I recommend you download that and copy it over the foundation.css in the download.The next step is to create the layout in a Master Page, see: Part Three.

Craig Wright technical author

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.

Email help@straygoat.co.uk
Phone +44 07954141761

Straygoat Writing Services Ltd
26 Wheatlands Road
Wingerworth
Chesterfield
Derbyshire

Registered Number: 08029184

Straygoat logo design by Bristol graphic designer, Nik Jones.

© Straygoat Writing Services Ltd.