Access keys | Skip to primary navigation | Skip to secondary navigation | Skip to content | Skip to footer |
Problems viewing this site

Implementation advice

Secondary navigation

(Refer to 1.2.7 of the CUE Standard.)

The secondary navigation consists of an expandable menu of text links located on the left of the page. The script (xc.js) will only run in standards compliant browsers supporting DOM Level 2 and ECMAScript. In other devices the menu will appear fully expanded.

The menu is implemented as an unordered list and sub-menus as nested unordered lists. It is important that sub-menu <ul>'s have both id and title attributes. It is likely that many pages will have a sub-menu expanded by default. Specify which sub-menus to leave open in the xcSet function called on the onload event. Simply add the appropriate id(s) as a new parameter.

eg.<body onload=xcSet('nav2xc', 'xc', 'submenu1', 'submenu4');">

This will keep submenu1 and submenu4 expanded by default.

TIP: If you do not require expandable secondary navigation on a page, do not load xc.js and most importantly do not call xcSet. If you make the function call ( <body onload="xcSet('nav2xc', 'xc')">) on a page with no menu of the form <ul id="nav2xc"> you will get the error: document.getElementById() is null or not an object.

If using templates you may require distinct templates for pages with expandable secondary navigation and pages without. Or, if your templating vocabulary supports conditional logic you can conditionally include the menu code based on the existence of an expandable menu.

Below is a narrative of how the script sets up the menu for those that need more detail:

  1. The page loads, triggering onload="xcSet('nav2xc', 'xc' [ids to be expanded]);" in the <body> tag.
  2.  xcSetfinds the element with the id of 'nav2xc' [ ie <ul id="nav2xc"> ].
  3.  xcSetloops through each <ul> tag inside that element.
  4. If the nested <ul> tag has an id value, the script takes control of it and treats it as an expand collapse sub-menu (otherwise it ignores it).
  5. For each of those submenus, [+] and [-] controls are created. These are links in the format:

    <a href="javascript:xcShow('subMenuID');" class="xcx" title="subMenuTitle(expand menu)">[+]</a>

    Both are created, but nothing is added to the html yet.

    Things to note here:

    • The class is either 'xcx' or 'xcc'. This is made up from the class name passed to the script on the body onload function.. xcSet('nav2xc', 'xc'). If you used xcSet('nav2xc', 'frog') these classes would be 'frogc' and 'frogx': x for expand [+], c for collapse [-].
    • The title is the title of the <ul> tag this +/- controls, with ' (expand menu)' or ' (collapse menu)' added on the end. Therefore it's very important to have a title on the ul, <ul id="subMenuID" title="subMenuTitle">
  6. It is likely that you will want some sub-menus expanded by default. Specify these by passing the appropriate sub-menu id(s) as a parameter to the xcSet funcion.

    eg. <body onload="xcSet('nav2xc', 'xc', 'submenu1', 'submenu4');">

    This will keep submenu1 and submenu4 expanded by default. Most menus are collapsed, and it is at this stage that display is set to 'none'.

  7. The parent element (assumably a <li> tag) has it's class changed to 'xc' as defined in the body onload function (again, you could use 'frog' or anything you prefer). This is to facilitate different styles for expanding/collapsing menus if javascript is supported (ie. if javascript is not supported, these classes are never set).
  8. The appropriate [+] or [-] link is inserted into the document. The other element is kept in the script memory (they get swapped every time you click the link).

A documented code listing (non Queensland Government link) of xc.js is available.

Last updated December