Search results

DITA: Add a menu selector

If you have multiple output files and you want to provide users with the ability to easily navigate from one output to another, you can add a menu selector in the header.

The menu selector is a simple menu that allows users to select other options. When a user selects an option, the URL switches to another page. Here's an example of what this looks like:

When the user makes a selection, the URL reloads another site entirely.

To incorporate a menu selector:

  1. Create a new HTML file by going to File > New > New Document > HTML.
  2. Insert a menu selector form with various options.

     <form><span id="progSelector">Programming language:</span>
              <select name="URL" onchange="window.parent.location.href=this.form.URL.options[this.form.URL.selectedIndex].value">
                  <option value="../java/index.html">Java</option>
                  <option value="../dotnet/index.html">.NET</option>
                  <option value="../cpp/index.html">C++</option>
                  <option value="../php/index.html">PHP</option>

    When a user selects an option, it triggers an onchange script to trigger that changes the browser's location to the URL of the option selected.

    Note that because OxygenXML's webhelp uses frames, you must use the window.parent.location as the target for each of theo ptions selected.

    The user will see the first option as the option that appears selected. Therefore, you need to customize the menu selector for each output.

  3. Create another header file and swap around the order. For the .NET transform, for example, put the .NET option first. Create another header file and swap around the order again. For the C++ transform, put the C++ option first.
  4. Click the Configure transformation scenariosbutton. Edit one of your transformation scenarios. On the Parameters tab, click the webhelp.footer.file option and set it to the right header file for that output.

Sponsored content

Buy me a coffeeBuy me a coffee