The menu script adds functionality to the navigation menu in the standard template.
The menu functions are part of the core.js file linked from the standard template by default. Users do not need to do anything special to call the script.
The script finds the menu on the page and inserts html to add classes and button links within the menu. The script also appends a breadcrumb listing to the content of the breadcrumbs section of the page. The standard style sheet uses the inserted classes to hide, show and highlight items in the menu.
Some other points worth noting:
The script works best on a
valid list.
Menus deeper than three levels can be cumbersome for users. The styles do not support menus deeper than four levels.
Where a page does not appear in the menu, but has a logical place which should be highlighted by styles and breadcrumbs, the
uM_menu.parent_path variable may be used: (
see below)
Where a link appears more than once in the menu, the script may produce unpredictable results. To avoid this, the duplicate links should have a duplicate class added. The script will then only recognise the link without the duplicate class.
Where a link targets the default file name in a directory eg: /about/index.html it is best practice to remove the file name and simply leave /about/. The script ignores default file names to support this practice.
Where a link targets a script url it will, by default, ignore the query string variables, eg:
page.php?page=home is simply seen as
page.php. This behaviour can be overridden by changing the value for
uM_menu.use_get_variables (
see below)
The script does the following tasks:
adds a placeholder image to all links in the menu
Adds a class of ‘collapse’ (and replaces the place holder with a link to expand the sublist) to all list items that contain an unordered list as a child.
Identifies the current page in the menu and expands its ancestors by adding a class of ‘expand’. The current link gets a class of ‘current_link’, the immediate parent gets a class of ‘immediate_parent’ and all higher-order parents get a class of ‘ancestor’.
The behaviour of highlighting the current page can be manipulated by setting the ‘uM_menu.parent_path’, ‘uM_menu.use_get_variables’ and ‘uM_menu.default_index’ variables in the window context (either in the html file or in a non-namespaced javascript include).
Adds breadcrumb links to a div with id of ‘breadcrumbs’.
Breadcrumbs consist of copies of each of the ancestor links of the current page plus a plain-text version of the link text of the current page link.
The breadcrumb structure allows the use of other semantic elements within the menu (eg. <acronym>, <h3> or <em>) which can be nested to any depth.
The whole menu is enclosed in an object literal (uM_menu) to avoid namespacing issues.
Note that none of these functions are likely to be useful outside of the menu script. You won’t need to call any of these to get the menu to work.
Usage: uM_menu.newLink(prnt, action);
Parameters:
prnt - element reference: the <li> element to be manipulated (ie, the parent of the link to be replaced)
action - string: ‘expand’ or ‘collapse’
Effect: creates a new node for insertion for expanding and contracting the menu
Returns: a reference to the constructed node
Hat-tip:
Processing:
create a new image and a new link
assign it attributes and event handlers/listeners according to the action specified
if no action is specified then return the image only (for a placeholder)
Usage: uM_menu.prepare();
Parameters: none
Effect: manipulates the menu
Returns: nothing
Hat-tip:
Processing:
exit if the browser doesn’t support the required methods
add placeholder images to all items in the menu
replace placeholders where the item has a ul as a child
highlight the current page (see highlightCurrentLink below)
Usage: uM_menu.expandSection(e);
Parameters: e - event for modern (non-IE) browsers
Effect: expands the selected section of the menu
Returns: nothing
Hat-tip:
Processing:
Usage: uM_menu.collapseSection(e);
Parameters: e - event for modern (non-IE) browsers
Effect: collapses the selected section of the menu
Returns: nothing
Hat-tip:
Processing:
Usage: uM_menu.highlightCurrentLink();
Parameters: none
Effect: adds classes to the menu hierarchy to highlight the current link and populates the breadcrumb div
Returns: nothing
Hat-tip: Stephen Davies and Iain Pople who wrote the original version for the 2004 templates
Processing:
build the pathname to look for using window.location, including options for:
uM_menu.parent_path (where the current page isn’t in the menu, but has a logical place within it - string, default: null, needs to match an href in the menu eg: ‘/this/path/page.html’)
uM_menu.use_get_variables (look for an exact match of any query string in the url - boolean, default: false, eg: uM_menu.use_get_variables = true;)
uM_menu.default_index (when a url describes a directory, what is the default filename to search for - string, default: ‘/index.html’, eg: uM_menu.default_index = ‘/index.php’;)
loop through all ‘a’ elements in the menu and look for ones that match the path, ignore links with a class of ‘duplicate’
once found, give the link a class of ‘current_link’, the li that contains it a class of ‘immediate_parent’ and all li elements that contain that a class of ‘ancestor’, at each stage adding the link to the breadcrumbs
