We use MadCap Flare’s side navigation to generate our documentation (docs) portal, a technical asset for our global customers (automakers, from Mercedes-Benz to Jaguar Land-Rover, Great Wall Motors, FCA, and others). Using a two-tier horizontal tile menu on the home page enables us to segment our docs portal and provide quick access to specific areas and to the most important content. The horizontal menu shown here can be used for top navigation as well.
This is our home page with the default and selected states of the tiles.
On mouseover, the graphic changes to an arrow, and the color of the tile changes to indicate the second level (submenus) and the selected option. Clicking a submenu takes you to a specific area in our doc portal.
For the tile menu to work, you need the following:
- HTML: For the names of the tiles and the URLs.
- CSS: Styling for the menus.
See the HTML area in the codepen for the required code here.
Adding the HTML
Add the HTML to your home page (front page) in your project. Make sure your startup topic is listed in the General tab of your Flare Target.
About the HTML
<nav> element represents a section of a page whose purpose is to provide navigation links. In this example, a
<nav> block is used to contain an unordered list (
<ul>) of links. With the appropriate CSS, this can be presented as a menu.
- Onmouseover: The event occurs when the mouse pointer is moved onto the main tile.
- Onmouseout: The event occurs when the mouse pointer is moved off the main tile.
</a> tag of the
href enter the text to display on each menu (i.e., in my example “Solution”, “Server”, “Client”, “Smart Delta”, and “Videos”).
The HTML code for the Solution menu is displayed next:
NOTE: The main menu items are not linked to any content, but if required you can add hyperlinks or cross-references instead of the
# in the
img src contains the reference to the image that is displayed on each tile. You need to add the appropriate image from your Flare project. The easiest way to do this is to locate the image in the Content Explorer and then drag-and-drop the image in the correct location using Flare’s XML editor.
The images for my menus are located under Images/Menu_Images:
In the following
li tags enter the names to appear on the submenus, again just before the closing
</a> of the
href i.e., for the first submenu under the
ul class “liverpool1” I used the text “Description”, “Release Notes”, “How To”, and “Deployment”.
After you add the text you can use the Insert > Hyperlink or Insert > Cross-Reference commands in Flare to add the links to each submenu.
The CSS adds the styling and control for the menus. See the CSS area in the codepen for the required code.
Adding the CSS
Add the code to the
<head> section in your home page:
<link href="../Resources/Stylesheets/homeMenu.css" rel="stylesheet" type="text/css" />
I used a separate CSS for the horizontal tile menus (homeMenu.css), but you can also copy the styles to an existing CSS file (e.g., home.css).
About the CSS
|Styles for the first submenu in a list.|
|Styles the odd-numbered submenus.|
|Styles the first tile including background color, margins, width and height.|
|Styles the area for the first submenu. The width can be increased to add space for additional submenus and to manually position the menu. You can do the same for the other submenus i.e., #tileNav ul.tottenham1, #tileNav ul.everton1, #tileNav ul.chelsea1, and #tileNav ul.leeds1|
|Controls what happens when the width of the screen reaches a certain size. |
Display: none is used to hide the menus when the screen reaches 1100 pixels. This prevents the menus from displaying on top of the submenu when the menus wrap to the following line.
|Defines a flex container for all its direct children.|
NOTE: If you receive a warning about Flex in Flare i.e.,
|Positions the images on the main tiles.|
|Removes the default bullets from the list.|
See the JS area in the codepen for the required code here.
<head> section in the master page.
NOTE: If the menu will only be used on the front page, you should add this to the master page used for the home page.
The script needs to be added to a subfolder called Scripts under the Resources folder.