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>
        </select>
    </form>

    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.

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.

© 2023 Tom Johnson