XML navigation

XML navigation

Easily build a navigation system for your web site from an XML sitemap!

This site uses an XML to manage the left navigation bar. The beauty of this system is that you can manage the navigation for all the pages on your site from 1 XML file. For simplicity I made my XML site map schema similar to the ASP.NET sitemap schema.

• View a demo
• Download source code

This system that requires 4 ingredients:

• An XML site map
• An XSL transformation file file
• An XSLT paring script
• A CSS file for the presentation of the output

The site map

First you need to build an XML sitemap. The for this site it looks like:

<?xml version="1.0" encoding="utf-8" ?>
<siteMap>
<siteMapNode url="default.asp" title="Home" accesskey="h"/>
<siteMapNode url="competition.asp" title="Competition" accesskey="o" />

<siteMapNode url="pictures.asp" title="Travel" accesskey="p">

<siteMapNode url="pictures.asp?album=NZ-North" title="NZ-North" />
<siteMapNode url="pictures.asp?album=NZ-South" title="NZ-South" />
<siteMapNode url="pictures.asp?album=Fiji" title="Fiji" />
<siteMapNode url="pictures.asp?album=LA" title="LA" />

</siteMapNode>

<siteMapNode url="projects.asp" title="Projects" accesskey="r"/>
<siteMapNode url="stories.asp" title="Articles" accesskey="a"/>
<siteMapNode url="bored.asp" title="Bored" accesskey="b"/>
<siteMapNode url="links.asp" title="Links" accesskey="l"/>
<siteMapNode url="contact.asp" title="Contact" accesskey="c"/>
</siteMap>

To add a new page to the site navigation simply add a new reference to siteMapNode in your XML sitemap.

The XML is (XSLT) converted to an unordered list which is then styled with a CSS file. Check out /css/nav.css to see this sites navigation CSS style. Many CSS navigation's are based on unordered lists so re-skinning the site should prove easy enough. For further CSS navigation examples check out: http://www.alvit.de/css-showcase/

Please Note:

• This code requires MSXML 4.0