In the summer of 2003, while redesigning the University of Lethbridge Faculty of Management site, I reworked our site map using the practices I’d learned while studying web standards and related issues. As a result, the site map turned into a nested set of clean, streamlined, semantic unordered lists.
Nice, but boring#section2
When you have a site that implements ideas from some of the best design minds on the web, you want to have a site map that offers better visual cues than a bulleted list. As I started to read articles like Dan Cederholm’s Mountaintop Corners and Icon Styled Headings, David Miller’s Zebra Tables and Mark Newhouse’s Taming Lists, I knew there were simple ways to spruce up certain elements of our website — and that our site map deserved some attention.
The thing I wanted most was a way to illustrate the site map’s parent-child relationships more clearly than the unstyled lists did. I decided that the most logical and intuitive way to represent this relationship would be to show parent elements as folders and child elements as files, and with this in mind, I attacked the markup.
The set-up#section3
The first thing I did was to differentiate between the unordered lists on the site map and all other unordered lists on the website by adding a class to the parent unordered lists.
<ul class="sitemap">
<li>
<a href="/section1/" rel="nofollow">Section 1</a>
</li>
<li>
<a href="/section2/" rel="nofollow">Section 2</a>
<ul>
<li>
<a href="/section2/page1.html" rel="nofollow">Page 1</a>
</li>
<li>
<a href="/section2/page2.html" rel="nofollow">Page 2</a>
</li>
<li>
<a href="/section2/page3.html" rel="nofollow">Page 3</a>
</li>
<li>
<a href="/section2/page4.shtml" rel="nofollow">Page 4</a>
</li>
</ul>
</li>
<li>
<a href="/section3/" rel="nofollow">Section 3</a>
</li>
</ul>
Now that the HTML was where I wanted it, I focused on the CSS. The first step was moving the list bullets. I also changed the padding and margin on the left-hand side to customize the indentation of the lists on the page.
ul.sitemap {
list-style-type: none;
margin-left: 0.5cm;
padding-left: 0;
}ul.sitemap li {
padding-left: 1.1em;
}
The next step was more difficult. I knew that I wanted to use Dan Cederholm’s icon-styled headings to introduce the icons without having to add tags to the HTML code. What I didn’t know was which elements I would use as “hooks” for Dan’s technique.
I initially assumed I could attach the icons to the <li> elements, but then it hit me that then the parent list items would display the document icons as well as the folder icons. So I decided to add the code to the list’s anchor tag style.
ul.sitemap li a {
background: transparent »
url('sitemapdocbullet.gif') no-repeat;
margin-left: -1.1em;
padding-left: 1em;
}
This identifies the icon and adjusts the padding and margin to indent the nested list and provide space between the icon and the list item.
The parent list elements, however, were still unstyled. Again, I couldn’t simply style the list items, because then all list items (including the ones with the document icons) would display folder icons. Since I had no other tags with the parent list items, I didn’t think there would be anything to which I could hook this new code.
Enlightenment!#section4
It hit me while I was in the shower one morning. “What about the nested
- element?” I could apply the style there, and then modify the margins and padding to position the icon next to its parent element.
ul.sitemap li ul {
background: transparent »
url('sitemapfolderbullet.gif') no-repeat;
list-style-type: none;
margin: -1.4em 0 0 -1.6em;
padding: 1.4em 0 0 0.6em;
}
Voilà!
Another issue that arose was finding a clean way to make each parent list item a link — again, the duplicate icon issue came up. I got a headache trying to find a way around it, but since I didn’t want to resort to scripting, I had to introduce an extra class on the parent item.
This made the code look like the following:
<ul class="sitemap">
<li>
<a href="/section1/" rel="nofollow">Section 1</a>
</li>
<li>
<a class="parent" href="/section2/" rel="nofollow"><span class="linewrap">»</span>
Section 2</a>
<ul>
<li>
<a href="/section2/page1.html" rel="nofollow">Page 1</a>
</li>
<li>
<a href="/section2/page2.html" rel="nofollow">Page 2</a>
</li>
<li>
<a href="/section2/page3.html" rel="nofollow">Page 3</a>
</li>
<li>
<a href="/section2/page4.shtml" rel="nofollow">Page 4</a>
</li>
</ul>
</li>
<li>
<a href="/section3/" rel="nofollow">Section 3</a>
</li>
</ul>
I then added the following rule to my CSS file:
ul.sitemap li a.parent {
background: transparent »
url(none) no-repeat;
}
With all that out of the way, I just had to touch up the nested list items a tad and I was good to go.
ul.sitemap li ul li {
margin-left: 0.5cm;
padding-left: 10px;
}
The result#section5
And there it was. The first example I ever come across of an icon-styled unordered list made exclusively with CSS.
You can see it at work at University of Lethbridge Faculty of Management site.
Ah. Stupid me. Thanks for telling me that in a nice way, Kim! :o)
I’m no designer, and the CSS is pretty messed up, but I’ve been using this same metaphor for ages now:
http://loadaveragezero.com/hnav/sitemap.php
Go right ahead and tear me a new one, I can take it. 😉
Doug
Hi all,
after reviewing a previous comment I made, I wanted to make sure I clarified something.
“Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.”
I did not mean by this that it was unfortunate ALA editors made a suggestion to improve the usability of the sitemap. What I did mean was that it was unfortunate that the new technique did not provide for a cross-browser solution that did not require a new class. Naturally, this is not the fault of the ALA editors.
I have also done a similar thing, though I have used definition lists for it so I didnt have to set a specific style for a subfolder.
The tree menu has full folder functionality, all that needs to be added are some classes that change the image from a folder to a file or whatever you like.
If you dont like the javascript to expand/retract folders you can just leave it out, all you need to do is not include the javascript. This will still save you lots of time getting things to fit to the pixel (it’s a b*tch).
The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all. There is a problem with nesting bigger than three folders down that I havent yet addressed. Should be an easy fix when I get time to look at it.
Anyway, enjoy: http://fumle.dk/public/javascript/tree/
Hmm, I have a preference for sections to be heading tags, for accessibility reasons. Screen-reader users can navigate a hierarchy of headings and therefore would be able to get the listing of the pages in that section far more easily.
Seb,
If you take a look at the example page linked at the end of the article, you will see the sitemap does use headings. The reason I didn’t use lower-level headings for the parent list items was because those items had their own pages and were also still items in the list.
I’m not sure I would say headings and subheadings are more semantical than using nested lists.
Even though the Code Cops seemed to have torn you a new one, I think that you will find your technique will be utilized elsewhere more and more now that this is on ALA.
Even though the “I did that same thing ten years ago” folks can never seem to keep to themselves while they discuss and marvel at their own genius elsewhere, I believe you will find something similar in their toolbelts soon.
Aside from some minor detours away from the CSS Bible of Coding Statutes, good work and keep moving. It seems to be the only way to avoid getting hit in here anymore.
When an article is posted on ALA, it is crucial that it is exposed to robust discussion and critique of the approaches used.
Without this, ALA would serve little purpose beyond hosting hacky how-to’s that thrive on thousands of ‘dezine’ forums around the web.
If someone posts an article of a reasonably obvious and widely used approach, and makes some rather obvious errors in process, testing and final output, then it’s likely that on ALA it will get pulled apart.
As has been mentioned already, styling nested lists has already had major visibility in the ‘scene’ over a year ago, without some of the glaring errors evident in the ALA example.
http://www.simplebits.com/notebook/2003/10/19/styling_nested_lists.html
As ALA’s goal is (was?) to increase CSS and xHTML technology I don’t really think its fair to presume anyone who criticised this article negatively as people who ‘marvel at their own genius’. Most have adopted earlier and better techniques in their toolbelt – happily acknowledging the original source.
this isn’t innovative, but since it’s something that is easy to do badly it is worth having a tutorial in the archives at ALA. Thanks
has anyone ever run across the situation where “bullets” sporadically disappear when implemented as the background image for
Peter Müller;
“The menu has been tested in Mozilla, Safari, Netscape, IE and Opera and works fine in all.”
Not in MY copy of Safari it doesn’t; your folders do not expand or retract, and the RHS column of pretty icons extends past the end of its “containing” white rectangle on many sub-pages.
On further investigation, the expand and contract is in fact not functional in firefox (windows) either, and in IE 6 the whole sitemap is bumped down below the LHS navigation, and the folders still don’t collapse.
Comments about “glass houses” come immediately to mind…
Caveat: I just realised that maybe you removed the script you were talking about? if not, oh dear…
I’ve had a similar situation on my intranet for about a year now. Except that I have a class on the ul called iconbullet, and then on the child li’s I have classes that show different icons based on their type, i.e. folder (for parents), url, pdf, xls, etc…
I think sprucing up a site map is the right thing to do. Most people treat the site map as a necessary device but treat it as it doesn’t belong in the website.
You never know who will be looking at your sites. I say be proud of every page.
Site maps are an important aspect of general UI design for the web and for Intranet/Extranet development. I believe that it may be one of the most important pages next to the actual home page.
And I digress with regards to my comments about the code cops in a previous post. It does, indeed, require criticism to move forward and learn. My remarks were intended to incite constructive critique as opposed to rip and tear. “Let me share my findings and point out the differences,” works much better than “I did this same thing a few years back and yours doesn’t work in Safari.” 😉
What do you tell on this site-map/ul style?
Sorry for czech lang of site.
http://www.pcsp.cz/mapa-serveru.php
Simple pre-loading such as:
window.onload = function () {
var imagesArray = new Array(‘images/image1.jpg’,’images/image2.jpg’);
preloadImages(imagesArray);
}
function preloadImages(imagesArray) {
for(var loop = 0; loop < imagesArray.length; loop++){ var preloadedImage = new Image(); preloadedImage.src = imagesArray[loop]; } ... will solve the problem where the "little file icon" takes a while to load when hovering over it for the first time. Merely add all the images used in the hover effect to the array called "imagesArray" in the JavaScript above and away you go!
I always thought sitemaps were for search engines. This actually makes a sitemap navigable by a human. Very cool.