• content
• navigation
• access
• search

---

Load XML extension

Version 1.0

The Load XML extension allows you to use an external XML document as your menu data source.

View the demo to see it in action. It works using XMLHttpRequest (aka Ajax) to load the XML, then imports data from that to populate the menus on the main page.

• Installation
• Script configuration
• XML configuration
• Browser notes
• Accessibility notes

Installation

Download the Load XML script and data file, copy them both into your udm-resources folder, and add the script include to the body section:

• Skip code example

<!-- load xml extension -->
<script type="text/javascript"
	src="/udm-resources/udm-x-loadxml.js"></script>

Script configuration

There's a single configuration variable at the top of the script, where you specify the location of the XML data file:

• Skip code example

um.xdata = '/udm-resources/udm-menudata.xml';

If you set a relative path, it should be relative to the page you're using it on.

XML configuration

The XML file that comes with the script shows how the menu data should be structured. Here's an outline of the format, showing a single menu:

• Skip code example

<?xml version="1.0" encoding="UTF-8"?>
<udm xmlns="http://www.brothercake.com/udm" xml:lang="en">

<menudata>
	
	<item idref="about">
	
		<ul xmlns="http://www.w3.org/1999/xhtml">
			<li><a href="/products/">Products</a></li>
			<li><a href="/services/">Service</a></li>
		</ul>
		
	</item>
		
</menudata>

</udm>

Inside each <item> node you define the menu as a complete <ul> including the HTML namespace. It's vital that you define the namespace (for the root <ul> inside each <item>) or the menus will be imported in the udm namespace, and either won't work at all (Mozilla), or won't have functional attributes (Opera).

Each <item> should also have a unique idref attribute, that tells the script which navbar item this menu should be appended to. So for our example, the corresponding list-item in the main navbar would look like this:

• Skip code example

<li id="about"><a href="/about/">About us</a></li>

When the script runs, it iterates through all the <item> nodes in the data file, and for each one looks for an HTML element with an ID matching its idref - if a match is found, the <ul> is imported and appended to that element.

Browser notes

This extension is not supported in Mac/IE5, Konqueror 3.2, Safari 1.1 or earlier, Opera 7.5 or earlier, or Mozilla builds older than 0.9.4 (Netscape 6.2).

Accessibility notes

Menus generated using this method are not accessible to non-javascript browsers.

• ← More extensions

Search