StyleMap v2: HTML Visual Sitemap
Note: If you find this article interesting, be sure to check out WriteMaps.com, a web application for creating sitemaps online.
This is an updated version of my orginal StyleMap HTML sitemap technique. This version provides many enhancements such as better browser support and simplified markup structure.
StyleMap v2 uses valid HTML, CSS and a touch of DOM scripting to produce a visual sitemap out of an unordered list (UL). The result is a functional, scalable, and above-all rapid way to produce a tree-style map for the planning stages of your project.
Keep in mind that although we'll cover the details of how the sitemap works, in practice you'll only need to worry about changing the markup to match your website structure. The CSS and Javascript can then be added as they are and will take care of the rest!
New in this version!
- Simplified UL/LI list structure - more familiar, easier to work with, probably more semantically correct too.
- Improved Browser Support - IE6, IE7, Latest Versions of: Safari, Firefox Mac/PC, Opera, Camino, Netscape
- Scaling up and down - The entire tree scales beautifully with browser text-resizing.
- Non-JS Outline View - Users with javascript disabled will see your data in outline view.
The final product
The following examples show possible implementations for StyleMap v2. Feel free to turn off CSS, Images, and/or Javascript to see how it degrades somewhat gracefully. Enjoy!
- StyleMap V2 Demo: A basic implementation of a website structure.
- Non-Javascript Version: This version shows how the classes are applied to the regular version. You could do it this way, but I'd rather let the JS do the dirty work. Note: You may need to expand your browser window for this example to render properly.
Download StyleMap v2 (Zip 12k)
Advantages of this technique.
- StyleMap uses simple HTML lists, making for easy updates, as opposed to desktop alternatives that use proprietary file formats.
- The presentation is driven by CSS, allowing many possibilities to match the look and feel of your client's branding.
- The entire tree scales beautifully with browser text-resizing.
- StyleMap degrades gracefully for browsers without support for CSS, images, or Javascript.
- Anchor elements within each list item allow them to be linked to their corresponding page.
- As opposed to a typical PDF, an HTML sitemap allows it to be indexed by search engines and accessible to multiple devices.
So how does it work?
First step: The basic markup structure
We start out with a UL with one LI (the homepage). Each LI in the sitemap will be wrapped with a div (for style purposes), and an anchor for linking to an actual document.
<ul id="sitemap">
<li><div><a href="#">Home</a></div></li>
</ul>
A small leap: Markup for two embedded list items.
Now that we have our homepage, we need to add inner pages. To do this, simply add a new UL before the closing tag of a list item. Here's our homepage with two child pages - About and Contact:
<ul id="sitemap">
<li><div><a href="#">Home</a></div>
<ul>
<li><div><a href="#">About</a></div></li>
<li><div><a href="#">Contact</a></div></li>
</ul>
</li>
</ul>
Follow the pattern: Markup for a full sitemap.
By simply following the same pattern, here's a slightly larger map:
<ul id="sitemap">
<li><div><a href="#">Home</a></div>
<ul>
<li><div><a href="#">About</a></div></li>
<li><div><a href="#">Portfolio</a></div>
<ul>
<li><div><a href="#">Print</a></div></li>
<li><div><a href="#">Web</a></div>
<ul>
<li><div><a href="#">Sites</a></div></li>
<li><div><a href="#">Apps</a></div></li>
</ul>
</li>
<li><div><a href="#">Video</a></div></li>
<li><div><a href="#">Animation</a></div></li>
</ul>
</li>
<li><div><a href="#">Contact</a></div></li>
</ul>
</li>
</ul>
Wrap it up: we'll add one div wrapper for centering the map.
Since the map is of unknown width, it's difficult to center it. We will add a div wrapper that javascript can use to stretch to a large width, set an inline width on the sitemap UL, and then snap the wrapper back into place. All you need to worry about is just adding a div around the sitemap like this:
<div id="contain">
<ul id="sitemap">
<li><div><a href="#">Home</a></div>
<ul>
<li><div><a href="#">About</a></div></li>
<li><div><a href="#">Portfolio</a></div>
<ul>
<li><div><a href="#">Print</a></div></li>
<li><div><a href="#">Web</a></div>
<ul>
<li><div><a href="#">Sites</a></div></li>
<li><div><a href="#">Apps</a></div></li>
</ul>
</li>
<li><div><a href="#">Video</a></div></li>
<li><div><a href="#">Animation</a></div></li>
</ul>
</li>
<li><div><a href="#">Contact</a></div></li>
</ul>
</li>
</ul>
</div>
That's all: simply link to the css and javascript files and your map should be good to go!
Link to the css and js files in the head of your document, like so:
<link rel="stylesheet" type="text/css" href="css/styleMap.css" />
<script src="script/styleMap.js" type="text/javascript" charset="utf-8"></script>
Usage
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
