QR code for this page

Powered by Titania Delivery

Customizing the Menu

By default, the menu component is displayed in all WebHelp Responsive pages. However, you might want to hide it completely, or only display some of its menu entries.

How to Hide Some of the Menu Entries

There are two methods for doing this. One of them involves editing the DITA map and marking the topics that do not need to be included in the menu, and another one that uses a small CSS customization.

Editing the DITA Map

To edit the metadata in the DITA map to control which topics will not be displayed in the menu, follow these steps:

  1. Open the DITA map in the Text editing mode of Oxygen XML Editor plugin.
  2. Add the following metadata information in the topicref element (or any of its specializations) for each topic you do not want to be displayed in the menu:
    <topicmeta>
  <data name="wh-menu">
    <data name="hide" value="yes"/>        
  </data>
</topicmeta>

Customizing the CSS

To customize the CSS to control which topics will not be displayed in the menu, follow these steps:

  1. Make sure you set an id on the topic that you do not want to include in the menu.
  2. Create a new CSS file that contains a rule that hides the menu entry generated for the topic (identified by the topic id growing-flowers in the following example). The CSS file should have content that is similar to this:
    .wh_top_menu *[data-id='growing-flowers'] {
  display:none;
}
  3. Use the Customizing WebHelp Output with a Custom CSS method to pass the CSS file you just created to the transformation scenario.

How to Hide the Entire Menu

If you do not want to include a main menu in the pages of the WebHelp Responsive output, you can instruct the transformation scenario to skip the menu generation completely. To do so, follow this procedure:

  1. Edit a WebHelp Responsive transformation scenario.
  2. Open the Templates tab and choose a skin.
  3. Open the Parameters tab and set the value of the webhelp.show.top.menu parameter to no.
  4. Click OK, then click the Apply associated button to execute the transformation scenario.

Parent topic: Customizing the WebHelp Responsive Output

Was this helpful?