A List Apart

Menu
Issue № 197

Spruced-Up Site Maps

by Published in CSS, HTML, Layout & Grids67 Comments

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

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

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.


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!

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:

    
    

    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

    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.

About the Author

67 Reader Comments

Load Comments