Edit online

How to Customize 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 Developer Eclipse 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. Reference the CSS file in a WebHelp Responsive transformation using an Oxygen Publishing Template or the args.css parameter.

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.

Using a Publishing Template
To hide the menu using an Oxygen Publishing Template, follow this procedure:
  1. If you have not already created a Publishing Template, see How to Create a Publishing Template.
  2. Open the template descriptor file associated with your publishing template and add the webhelp.show.top.menu parameter in the parameters section with its value set to no.
    <publishing-template>
    ...
    <webhelp>
        ...                
        <parameters>
            <parameter name="webhelp.show.top.menu" value="no"/>
        </parameters>
    </webhelp>
  3. Open the DITA Map WebHelp Responsive transformation scenario.
  4. Click the Choose Custom Publishing Template link and select your template.
  5. Click OK to save the changes to the transformation scenario.
  6. Run the transformation scenario.

Using a Transformation Scenario in Oxygen XML Editor/Author

To hide the menu using a transformation scenario from within Oxygen XML Editor/Author, follow this procedure:
  1. Edit the DITA Map WebHelp Responsive transformation scenario and choose a template.
  2. Open the Parameters tab and set the webhelp.show.top.menu parameter to no.
  3. Click OK to save the changes to the transformation scenario.
  4. Run the transformation scenario.