CSS AJAX Navigation
Using AJAX to dynamically build the navigation
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" ?>
<menu url="home.htm" title="Home"/>
<menu title="Jobs EU">
<menu url="jobs/eu/ceo.htm" title="CEO EU"/>
<menu url="jobs/eu/cfo.htm" title="CFO EU"/>
<menu title="Jobs USA">
<menu url="jobs/usa/ceo.htm" title="CEO USA"/>
<menu url="jobs/usa/cfo.htm" title="CFO USA"/>
<menu url="services/delivery.htm" title="Services">
<menu url="services/delivery.htm" title="Delivery"/>
<menu url="products/chips.htm" title="Products">
<menu url="products/chips.htm" title="Chips"/>
<menu url="products/beer.htm" title="Beer"/>
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
For example if you have pages
the URL of the CEO job from the beer page would be rendered as
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
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
Next you need to include the
menu_main in the
onload event handler of the
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.
- Sample site