[43600 views]

[]

CSS AJAX Navigation

This article is a followup to my CSS Navigation article. In that article I have provided a client-side JavaScript that traverses a static HTML navigation tree and enhances it with the right style classes depending on the current URL location. This however still leaves the developer with a server-side problem: the inclusion of the navigation tree into the page. For very simple static HTML sites this is already a problem. Of course a template mechanism can be used at development time, such as Dreamweaver templates. But I am offering a different solution here.

Using AJAX to dynamically build the navigation

AJAX lets the browser download and parse XML files in the background. We can use this to maintain our menu structure in a separate XML file. Instead of including the navigation statically in every page, just a placeholder div is placed in the page. A JavaScript will download and parse the XML file and generate the appropriate HTML list dynamically. Of course the style classes will be set the same way as has been outlined in my previous article.

The XML is simpler than the HTML list

As you may remember, maintaining the nested HTML UL/LI list is quite cumbersome, because you have to be careful to do the nesting correctly. LIs contain an A element and an UL element. This has always been the source of a little confusion to the unwary. Now that we can define our own XML structure for a navigation we have the chance to simplify. I propose the following structure:


<?xml version="1.0" encoding="ISO-8859-1" ?>
<navigation>
  <menu url="home.htm" title="Home"/>
  <menu title="Jobs">
      <menu title="Jobs EU">
          <menu url="jobs/eu/ceo.htm" title="CEO EU"/>
          <menu url="jobs/eu/cfo.htm" title="CFO EU"/>
      </menu>
      <menu title="Jobs USA">
          <menu url="jobs/usa/ceo.htm" title="CEO USA"/>
          <menu url="jobs/usa/cfo.htm" title="CFO USA"/>
      </menu>
  </menu>
  <menu url="services/delivery.htm" title="Services">
    <menu url="services/delivery.htm" title="Delivery"/>
  </menu>
  <menu url="products/chips.htm" title="Products">
    <menu url="products/chips.htm" title="Chips"/>
    <menu url="products/beer.htm" title="Beer"/>
  </menu>
</navigation>

As you can see, there is now only one element called menu. And it uses attributes for the URL and the menu text. Also the nesting is now comprehensive. This greatly simplifies configuration!

Folders and location independence

When your website uses a folder structure, then the navigation XML must reference all pages relative to the topmost folder. The JavaScript takes care of changing the URLs depending on the page that the navigation is inserted into.

For example if you have pages jobs/usa/ceo.html and products/beer.html the URL of the CEO job from the beer page would be rendered as ../jobs/usa/ceo.html

Menu entries without content

Often menu entries have no real content but rather serve structure. In that case the entry reall forwards to the first inside one that has content. In the XML this is defined by just leaving the url attribute away and letting the JavaScript figure out the rest.

Simple integration

First write the XML file for your navigation as shown above. Then you need an HTML div element that can be used to attach the navigation dynamically. The div must have a unique id:

<div id="s1"></div>

Next you need to include the ajaxmenu.js JavaScript and call the function menu_main in the onload event handler of the body tag:

<head>
  <script type="text/javascript" src="ajaxmenu.js"></script>
</head>

<body onload="menu_main('nav.xml', 's1');">

Last but not least, include a CSS for your navigation, as outlined in the previous article.

Completely client-side, no server-side scripting! Minimal impact on HTML code. No menu flickering when changing the page!

Here is a sample menu that shows the navigation in action.

Downloads