XooMapper v1.2

Creating a site map for a site is a very useful addition for your visitors. Users will get to see a hierarchical structure of your site at a quick glance and can then visit pages more easily. They’re also very useful for opening all of your links to search engines. The problem with site maps is they’re hard to navigate if your site has many, many pages. However, allowing users to see a collapsed version and be able to expand sections as needed could help them navigate without becoming overwhelmed.

XooMapper v1.2 is a small script I’ve developed to help create an expandable site map.

Demo

Download .zip <– includes .js, .css, .html and .png/.gif files

Unobtrusive - Degrades Gracefully

The script is written to manipulate the DOM when the page loads. The original list of links is a nested unordered list. Nested links are hidden at page load and clickable expand/collapse images are added to those links that have sub-links. If a user has JavaScript disabled, then they will see the full nested list.

Accessible

Users that use accessibility devices will have access to all links. Devices that cannot/do not execute JavaScript will see the full nested list. Users can also tab through and expand/collapse sections with the left/right arrow keys.

Implementation

Your site map page should contain a nested unordered list of all of the links in your site. The containing <ul> should have an id of ’sitemapper’. For Example:

<ul id="xoomapper">
	<li><a href="#">Link 1</a>
<ul>
	<li><a href="#">Sub Link 1</a></li>
	<li><a href="#">Sub Link 2</a></li>
</ul>
</li>
	<li><a href="#">Link 2</a>
<ul>
	<li><a href="#">Sub Link 3</a>
<ul>
	<li><a href="#">Sub Link 4</a></li>
	<li><a href="#">Sub Link 5</a></li>
</ul>
</li>
</ul>
</li>
	<li><a href="#">Link 3</a>
<ul>
	<li><a href="#">Sub Link 6</a>
<ul>
	<li><a href="#">Sub Link 7</a></li>
	<li><a href="#">Sub Link 8</a></li>
</ul>
</li>
</ul>
</li>
	<li><a href="#">Link 4</a>
<ul>
	<li><a href="#">Sub Link 9</a>
<ul>
	<li><a href="#">Sub Link 10</a></li>
	<li><a href="#">Sub Link 11</a></li>
</ul>
</li>
</ul>
</li>
</ul>

Next, you need to add the following snippets to the <head> section of your page (be sure to change /your/path/ to your actual path on your server:

<script src="/your/path/xoomapper.js" type="text/javascript"></script>
<link href="/your/path/xoomapper.css" rel="stylesheet" type="text/css" media="all" />

Then, for users without JavaScript, add this snippet to the <head> section of your page:

<noscript>&lt;br /&gt;&lt;style type="text/css"&gt;&lt;br /&gt;/* if javascript is not available&lt;br /&gt;   we set #sitemapper to display all */&lt;br /&gt;#xoomapper ul{display:block;}&lt;br /&gt;&lt;/style&gt;&lt;br /&gt;&lt;br /&gt;</noscript>