Accordion Menu in MadCap Flare - Part Five

This is Part 5 of a series of posts on how to create the following layout, complete with accordion menu and slide-in drill-down menu, in MadCap Flare.

If you missed the previous parts, here are links:

• Part One
• Part Two
• Part Three
• Part Four

In this post, I'm going to cover the TopicStyles.css and the Target. Please note that there are still some outstanding issues with this solution, as mentioned in the Troubleshooting section at the end of the post. I'm working on figuring these out and will post the solutions as soon as I can.

The TopicSyles Stylesheet

For the project, Dave created a single stylesheet called TopicStyles. When I implemented it for a client, I created two stylesheets, and I'll explain why later. In the stylesheet, Dave sets the styles for the divs created in the master page, some styles for Flare, and also some overrides for the styles that are in the foundation.css. The Foundation files downloaded into Flare contain css stylesheets that set the styles used by Foundation - you can override these by adding them to the TopicStyles.css.You can create the TopicStyles.css by adding a new style sheet in Flare and then adding the code below:

/*<meta />*//* Styles for Foundation menu example project *//* DON'T EDIT THIS FILE IN FLARE - it will break the CSS for the not statement "li.is-accordion-submenu-item:not(.is-accordion-submenu-parent) > a.selected" */body{font-family: Arial, Helvetica, sans-serif;line-height: 150%;}MadCap|breadcrumbsProxy{border-bottom-color: #d3d3d3;mc-breadcrumbs-count: 10;mc-breadcrumbs-prefix: '>> ';}/* ---------------------- Styles for the items we've created, e.g. containers used in the master page --------------------- */#page-content /* page container, includes accordion and topic */{}#header-area /* header area container */{width: 100%;padding: 1rem;background-color: #E3DED9;}#header-title /* header title container */{text-align: center;}#header-search /* header search box container */{}#topic-content /* topic container */{padding: 1rem;box-shadow: -2px 0px 2px rgba(227, 222, 217, 0.5);}#nav-accordion /* accordion navigation menu container */{padding: 1rem;}#nav-drilldown /* drilldown navigation menu container */{}/* Set menus to be initially hidden, to prevent FOUC (flash of unstyled content). The menus can initially appear unformatted before all scripts have run, which was evident in Chrome browser especially. So we hide the menus in the CSS, and then display them in the script (using display:block), after they have been manipulated. */#nav-accordion,#nav-drilldown{display: none;}#footer-area /* footer container */{width: 100%;padding: 1rem;background-color: #E4D5C6;}/* ---------------------- Flare menu skin styles - override some default styles ----------------------------- *//* These menu skin styles are hard-coded in Flare's CSS, despite setting them in the skin. Override as required */ul.menu a /* override color - hard-coded as black */{color: #3C3C3C;outline: medium none;text-decoration: none;}ul.menu,ul.menu ul,ul.menu li{list-style: outside none none;margin: 0;}ul.menu,ul.menu ul,ul.menu li{padding: 0;}ul.menu li > a{display: block;}ul.menu li > a.selected{font-weight: bold;}._Skins_SearchResults #resultList h3.title /* remove underline from search results */{text-decoration: none;}/* ---------------------- Foundation styles - override some default styles ----------------------------- */.row /* set max width of a Foundation row, default is 62.5rem */{max-width: 100rem;}li.is-accordion-submenu-item:not(.is-accordion-submenu-parent) > a.selected /* the selected item in the accordion menu, but just the topic link and not the accordion book. DON'T EDIT THIS FILE IN FLARE - it will break the CSS for the not statement "li.is-accordion-submenu-item:not(.is-accordion-submenu-parent) > a.selected" */{transition: background-color 0.2s ease;background-color: #2199e8;color: #ffffff;}#nav-drilldown a.selected /* the selected item in the drilldown menu */{transition: background-color 0.2s ease;background-color: #2199e8;color: #ffffff;}ul.menu li > a:hover /* hover style for all menu items, for both accordion and drilldown */{background-color: #CAECF5;}li.is-accordion-submenu-parent > a /* accordion menu book - all, both opened and closed */{border-bottom: 1px solid #EAEAEA;padding-right: 2rem; /* increase right padding from 1em to 2em, as text appears under icons */}li.is-accordion-submenu-parent[aria-expanded="true"] > a /* accordion menu book - open only */{background-color: #fafafa;font-weight: bold;}

Right at the top, you'll see that Dave has added a note that you should not edit this stylesheet with Flare's editor. That's because there is a bug in Flare (certainly in v11, but maybe it has been fixed in 12?) that substitutes the full stop in 'not(.' with 'not(\00002E'. For the same reason, never edit any other external stylesheet in Flare. This can be a problem when you are handing over the project for others to work on. I've added a little tip later on for dealing with this situation.The other parts of the stylesheet are for styling the divs, headings, and lists. I'm not going to go into detail on these, as they are all just regular css stylesheet things, and Dave has commented the styles. What I will draw your attention to is the following part:

#nav-accordion,#nav-drilldown{display: none;}

This solves a problem that affects the Foundation menus and also the smartmenus alternative. The problem, known as FOUC or Flash of Unstyled Content, is that when the browser first renders the page, it loads the menu as a plain list for the second or so it takes to run the script and apply the styling. This can look pretty shoddy, and you'll want to get rid of it using display:none. The display:none attribute stops the browser from displaying the list before it is formatted by the script.

The Target

To get the Foundation menu solution to work, you need to make sure the Target has the following settings in place:

On the General tab, make sure the Master Stylesheet is set to (default). The other settings aren't too important, though obviously you need the Master TOC and Startup Topic to be files in your project.On the Skin tab, make sure Skin is set to (none). That's really important - if a skin is selected, the Foundation menus won't work. The Menu, Search Bar, and Search Results need to be set to appropriate files in your project. Remember that the Menu.flskn is referenced in the foundation-menu-off-canvas-initialisation.js script file (in the Scripts folder) and the Master Page. If you are using a Menu file with a different name, you will need to change the script and Master Page to reference the different file name too.

On the Advanced tab, make sure you set the Master Page to the Foundation-responsive-offcanvas Master Page (the Master Page that contains the accordion menu and drill-down menu layout).

Note that in my project, I have added a prefix to the name of the Master Page. This is just because this particular project uses a global project with children structure, and each of the children has a slightly different Master Page (they contain different graphics in the headers).Those are the only settings that you have to have in place for the Target. The other Target settings you can use or leave set to their defaults, depending on what features you want to use in your project.Okay, that's the stylesheet and Target stuff covered. Now, how about I share the demo project with you?

‍

Troubleshooting

In Part 6, I will cover some issues that I have run into with this project, and also try to add workarounds or solutions. At this point in time, there seems to be a problem with the Foundation menus working on Apple devices, which is a big problem for my client. I'm looking into it, but am waiting on developers to get back to me.