Side Navigation is a type of HTML5 output that can be designed to look like a modern website, where the main navigation is positioned at the left or right. It allows you to use a flexible, frameless output while continuing to have a more traditional configuration that looks like the Tripane format. This kind of output is possible with the Side Navigation skin type and other related features.
For more about this and the other HTML5 skins, see Differences Between HTML5 Skins.
It is also common to use smaller HTML5 skin components with proxies in
There can be just a few steps or many steps when producing
You can approach
The easiest way to create this kind of output is to use
A second option is to create this kind of output in an existing project all by yourself, adding and modifying the elements described below.
Finally, you can use a combination of the first two methods. You can create a small project from
For an example of this method, see Side Navigation Tutorial.
Before you start creating
You might decide to create a new project from
For an example of this, see Side Navigation Tutorial.
One of the benefits of Side Navigation over Top Navigation output is that the main menu is vertical rather than horizontal. This means you have more space for first-level items in your table of contents (TOC). Whereas most Top Navigation projects keep the number of first-level items in the TOC limited to around six or so, you can have far more first-level items in a TOC designed for Side Navigation.
Therefore, if you are moving from a Top Navigation format to Side Navigation, you might consider rearranging your TOC to include more items at the first level. However, this is not mandatory. If you are happy with a limited number of first-level TOC items, there is no reason to adjust your TOC.
If you generate HTML5 output, links to the TOC (e.g., menu items, breadcrumbs, mini-TOCs) are dynamically generated when a particular topic is opened. This allows you to keep these navigation elements in sync with your TOC. This is particularly important if the same topic is linked to multiple entries in your TOC; otherwise, menu items and other navigation elements might display for one instance of that topic in the TOC when another instance is preferred.
For HTML5 Tripane output, navigation elements will always remain in sync with your TOC entries. However, for HTML5 Side Navigation, Top Navigation, and skinless outputs, you must enable a feature in your target to synchronize navigation elements with TOC entries.
Synchronizing navigation elements with your TOC entries seems like an obvious decision, and for some authors it is. However, other authors might choose not to do this for their Side Navigation, Top Navigation, or skinless outputs. There are pros and cons.
Note: If you decide not to use this option for your HTML5 Side Navigation, Top Navigation, or skinless output but you are still concerned about having duplicate TOC links, there is a workaround. You can create a snippet that holds all of the content for the topic. Then create multiple topics (as many topics as you need links to it in the TOC), and insert that snippet into each one. Rather than linking to one topic in multiple places in the TOC, you can link to a different topic in each place. By doing that, your navigation elements will point to the appropriate locations. However, you probably also want to disable searching in all but one of those topics; otherwise, they will all show up in the search results
- Add a
SideNavigation skin to your project (Project > New > Add Skin). See Adding Skins.
Following are a few of the more common adjustments that are made in skins:Pane PositionSlide-Out Menu Style
On the Setup tab of the Skin Editor, you can choose the look of the slide-out menu for
SideNavigation output (i.e., the menu that opens when you click the “hamburger” icon in tablet or mobile view). See Setting the Slide-Out Menu for Side or Top Navigation Output.
You can select a drilldown format. Any item containing sub-items has a double-arrow next to it. When you click on such an item, the entire menu changes, showing only that item and its sub-items.
Alternatively, you have the option of using a tree format instead. With this format, any item containing sub-items has a down arrow next to it. When you click on that item, the sub-items are shown, but the rest of the menu remains in view as well.Main Menu Position
On the Setup tab of the Skin Editor, you can position the main menu position to Top, Left, or Right. This is the primary menu (links to topics) that is based on your TOC when the output is being viewed on a large screen (not tablet or mobile). In a new
SideNavigation skin, this field is set to Leftby default, meaning the main menu will be placed on the left sideof the screen. However, you can change it to Right if you want the menu shown on the other side of the screen. If you choose Top, you will no longer be using a Side Navigation skin, but rather a Top Navigation skin, where the main menu is positioned at the top of the screen.Fixed Header
On the Setup tab of the Skin Editor, you can fix the header portion of the topic so that it stays in place when users scroll down to see more content.
For Side Navigation skins, you can do this for all screen sizes (web, tablet, mobile), or for web only. See Setting a Fixed Header for Side or Top Navigation Output.Logo
On the Styles tab of the Skin Editor, you can replace the generic logo with your own.
Whatever image you use for your logo, it is automatically set to link to the topic that you've set as the Startup Topic on the General tab of the Target Editor. However, you can select a different topic or even enter the URL to your company's website instead (remember to include http:// at the beginning of the path if you link to a website). This can be done on the Setup tab of the Skin Editor.Alignment for Logo and Search Bar
There are some flexbox-related options on the Styles tab that let you align the logo and search bar in the header. These fields are called “Full Row” and “Order.”
- Full Row This option allows the element to take up all of the space horizontally in the header.
- Order This option determines which element comes first, second, or third in the header. Side Navigation has only two elements (logo and search bar), but Top Navigation has three (logo, search bar, and main menu).
Let’s say you add a new Side Navigation skin. Initially it looks like this:
The logo comes first (Order=1) and is positioned left, whereas the search bar comes second (Order=3) and is positioned right.
Maybe you want to reverse this, placing the search bar first (aligned left) and the logo second (aligned far right).
In that case, you would change the settings like this:
Now suppose you create a new Top Navigation skin. Initially it looks like this:
The logo comes first (Order=1) and is positioned left. The menu is second (Order=2) and is positioned right. The search bar is third (Order=3) and is set to take up all the space below the others (Full Row=yes).
Now maybe you want each element to take up all the space on its row, centered, with the logo first, followed by the search bar, and then the menu.
In that case, you would change the settings like this:
Open your HTML5 target and on the Skin tab, associate the
SideNavigation skin with it. See Associating Skins with Targets.
(Optional) By default, the
SideNavigation skin includes a menu on the side and a search bar at the top of topics, but if you want to add elements such as these directly in topics or master pages, you can add small HTML5 skin components to your project to include special menus, search elements, and toolbars. This is the same process as adding a regular skin (Project > New > Add Skin), except you are adding an individual component.
Actually, you can add features such as these in your output without adding skin components. You can do this by inserting the appropriate proxies (see step 11). The skin components are used to create a custom look for the elements, while their related proxies are used to perform the actual generation of the elements. So although adding skin components is an optional step, it is likely that you will want to do it if you decide to add navigation proxies.
For more details about these elements, see Skin Components and Proxies.
(Optional) In the same way that you can edit a regular skin, you can edit individual skin components. When you open a component to edit it, you will notice that the Skin Editor is slimmed down to show only the properties and fields related to that component.
See Editing Skin Settings and HTML5 Skin Styles.
Create a Home topic. This is the first topic shown when users open the output. It is just a regular topic, but you might decide to design it to stand out from the rest of the topics. Make sure to set this topic as your startup topic. You can do this by opening the Target Editor, selecting the General tab, and choosing the topic in the Startup Topic field.
For more details, see Home Topic.
(Optional) You can create other topics, including regular topics that contain the bulk of your content.
You can also create a special topic to hold generated search results. A
SideNavigation skin already includes a search bar, and you do not need to do anything else to incorporate search into your output. When an end user searches for text, Flare displays the results in its default format. However, if you want to be able to customize your own search results page, you can create a topic specifically for that purpose and insert a Search Results proxy into it (Insert > Proxy > Insert Search Results Proxy). This works with the Search Results skin component that you can add to a project (see step 4).
Add topics to a TOC file.
See Creating a TOC.
The Side Navigation skin uses the structure and contents of your TOC to populate the menu that appears at the left or right side of topics.Tips
Tip: Although Flare lets you create books in the TOC file that do not link to anything (i.e., merely using the book to organize the TOC), it is a best practice for
SideNavigation output to make sure that all TOC books and items are linked to something.
Tip: It is standard practice in web design to not include your Home page as a menu text link. The default behavior in
SideNavigation output is to link the logo to the Home page, so it is not necessary to add this topic to your TOC.
(Optional) It is not mandatory to create any master pages in order to have
SideNavigation output. However, master pages can be particularly useful, especially if you want the same content to automatically show up at the bottom or top of topics. They can also useful if you want your Home page's design to be much different from that of the rest of your topics. So if you would like to incorporate one or more master pages, create them. See Creating Master Pages.Example
In Flare's Side Navigation template, we wanted to show footer content at the bottom of the Home page, so we created a master page just for that topic, and we added footer content under the Topic Body proxy.
Then on the rest of the topics we wanted breadcrumbs to be displayed above the topic content. So we created a second master page (“OtherTopics.flmsp”) for all of those topics and inserted a Breadcrumbs proxy above the Topic Body proxy.
(Optional) You can select a master page on the Advanced tab of your HTML5 target.
See Associating Master Pages with Targets.
This tells Flare that, unless otherwise directed, all topics will use the master page you selected. But if you want to use a second master page, you can open the Properties dialog for a particular topic and point to a different master page. In that case, the master page set in the target is typically the one that the majority of your topics will use. But for the other topic(s) using a different master page, you can override the target setting.
See Associating Master Pages with Topics.Example
In this example, the master page that we want to use for most of our pages in the output is named "OtherTopics." So on the Advanced tab of the Target Editor, we selected it.
Then we opened the Properties dialog for the Home topic (open topic, then File > Properties). On the Topic Properties tab, we clicked in the Master Page field and selected HomePage. Now this topic will use the "HomePage" master page instead of the other one for the rest of the topics.
(Optional) You have the option of inserting a variety of proxies (Insert > Proxy > [Name of Proxy]) into your master page(s) and topics. This includes proxies that correspond to the different kinds of skin components you can add to your project (e.g., Menu, Topic Toolbar, Search Bar, Search Results).
See About Proxies.
For more details, see Skin Components and Proxies.
(Optional) If you have added skin components to your project, you can associate them with an entire target or with individual proxies. If one skin component is associated with the target and a different one is associated with a proxy, the one associated with the proxy has precedence.Target
To associate a skin component with an HTML5 target, open the Skin tab in the Target Editor, then make your selection in the Component Default Skins section
. See Associating Skin Components with Targets.
It is not necessary to select anything in these fields, especially if you have only one type of a particular skin component (e.g., one Topic Toolbar component). But if you have more than one type of a skin component (e.g., two Topic Toolbar components), you can choose one of them as the default for all of the topics in the target. Then for the other component(s) of that same type, you can override the target setting by pointing to it in the relevant proxy (see below).Proxies
To associate a skin component with a proxy, open the master page or topic where you've inserted the proxy. Then right-click the proxy and use the dialog to choose the skin component.
For more information about associating skin components with proxies, see Skin Components and Proxies.Note
Note: It's possible that you will not need skin components in your project at all. If you have not added a skin component but you insert a proxy related to it, Flare will just use the default design from the application.
Make sure your stylesheet(s) are associated with the appropriate files.
In Flare's Side Navigation template, you will notice that one stylesheet is used. It is already selected at the project level (Project > Project Properties) so that it is automatically used for all content files in the project.
(Optional) Responsive output is automatically enabled for
SideNavigation skins. But you can set a few additional options on the Skin tab of the Target Editor. See About Responsive Web Design and Responsive Skins.
When a skin is responsive, the navigation elements are automatically adjusted depending on the size of the screen.
- Tablet Breakpoint Enter the number of pixels for the maximum width of a Tablet view.
- Mobile Breakpoint Enter the number of pixels for the maximum width of a Mobile (or phone) view.
- Use device with media queries Select this option if you want to base the responsive output not merely on the width of the output display, but on its width in the actual device (browser, tablet, or mobile). In other words, if you do not have this option selected and you view the output on a full browser, you can see the tablet and mobile layouts simply by reducing the size of the browser window. But if you select this option and you reduce the width of the browser, the layout will not change to the tablet or mobile formats.
For more details on how Side Navigation output is put together, please see the Side Navigation Tutorial
Note: Flare's HTML5 Side and Top Navigation skins do not support runtime project merging.