CSS SiteMap
UPDATE: See update notes below.
Recently I needed to crank out a visual sitemap (or is it a directory tree?) from a rather large site and had a devil of a time finding decent tools to help. Everything I found in my search was either too costly, too complicated, or too unattractive for my purposes. A case in point was CSS Diagrams—a damn fine piece of work (and free), but it really didn’t suit my needs. But it did give me an idea. Why not roll my own sitemap diagram in HTML and CSS? (Note: If you want to cut to the chase, check out the demos in vanilla and chocolate flavors.)
The Foundation: HTML
The HTML of my little project had to be simple and semantic; even if only to make the process of migrating my work to a better process later all that much easier. Unordered lists are pretty simple and they can show hierarchy pretty well, so we’ll start there. I did add a class to the topmost list as well as the containing div for some CSS magic to stick to, but that’s all we’ll need. I tossed in the collapse directories link for some pixie dust to be applied to later. So here’s the gist of our sitemap code (the exact code is slightly different in the demo example):
<div classid="sitemap">
<ul>
<li>Web Root
<p class="dirshow"><a href="#">collapse directories</a></p>
<ul>
<li>stuff
<ul>
<li>nested-deep
<ul>
<li>nested-deeper
<ul>
<li>nested-deepest</li>
</ul>
</li>
</ul>
</li>
<li>nested deep</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>The problem I quickly ran into with my unordered list was its length. On a mondo site such as ITCWeb, there are scores of root directories and hundreds of subdirectories. It’s near impossible to get a summary understanding of the site when you have to scroll through so many lines. What if we could get the information to go into two axes rather than just the one? That would help flatten out the list by pushing some of the vertical information horizontally.
The Magic: CSS
After doing the usual CSS cleanup on the top-level ul—removing the list-style and resetting the margins/padding to zero—we stretch this list out horizontally by making all li positions relative and adding a left dimension. For all nested lists (ul ul), we can get them to line up across the top by giving a negative value to the top margin that’s approximately equal to one line height. These few modifications removed most of the vertical list space. Essentially, we took a five-level section that used to take up five vertical lines and spread it horizontally so it now only takes up one vertical line. Specifying a font-size of 90% on the nested lists also shaved some page height as well as width.
The rest of the CSS is pure visual candy and final polish. The fancy colored bevel is created by creating equally thick top and left borders, then giving the top border a color the same as the background and the left border the color of your choosing. Lastly, the IE conditionals inserted in the header after the main style sheet should be familiar to all who deal with the IE monsters.
#sitemap {
font:normal 16px Arial,sans-serif;
overflow:hidden;
}
#sitemap ul {
list-style:none;
margin:0;
padding:0;
}
#sitemap li {
background-color:#eee;
margin:0 0 -0.1em;
min-height:1em;
padding:.2em .4em;
position:relative;
width:9em;
}
#sitemap ul ul {
font-size:90%;
margin-top:-1.4em;
}
#sitemap ul ul li {
background:#ddd;
border-top:0.5em solid #fff !important;
border-left:0.5em solid #66c;
left:10.4em;
}
#sitemap ul ul ul li {
background:#ccc;
border-color:#9c3;
}
#sitemap ul ul ul ul li {
background:#bbb;
border-color:#c93;
}
#sitemap ul ul ul ul ul li {
background:#999;
border-color:#c33;
color:#fff;
}
The Voodoo: JavaScript via jQuery
For the final piece de resistance, we’ll sprinkle a little jQuery pixie dust on that collapse directory link mentioned earlier (to expand and collapse the third level and deeper lists). This little action really flattens out the verticality of the list for those moments when you need it.
The End… or Is It?
So there it is. Once again here’s the linkage to the vanilla and chocolate sitemap demos. It looks decent, it’s easy to edit, and the code is clean and Web Standards compliant. What do ya think?
UPDATE: As one of our commenters pointed out, the original JavaScript was a tad obtrusive. So I refactored the code a bit to make it safer for human consumption. Note that the original “sitemap” class attribute was changed to an id and that the corresponding CSS and jQuery was adjusted accordingly.
Saaweet! Shockingly little Javascript, but I guess that’s the mark of Jquery. Thanks for having a large unwieldy site that you need to map, and for being a generous genius. There are probably a lot of possible uses for this other than sitemaps.
Gotta love the “that = $(this)” silliness. The value of “this” in that anonymous function scope seems to be the href value of the expander button <a> tag, the object calling the click method. Normally this would be a reference to the object containing the called method ( [object Object] if you alert it out, i.e. the expander <a> tag). I’m a little confused why that isn’t the case here. And how would that url string parameter allow the $ function to target the right <a> tag? Doesn’t it need a CSS selector or an element ID? Voodoo, I tell you, voodoo
Would you mind if I took a crack at back-engineering the Javascript into YUI? I’m sure it’s going to look verbose compared to Jquery, but I’m curious.
And I totally understand the prototyping slapdashery, but the inline styles could/should probably eventually get moved out, especially in an XHTML strict document.
John: Thanks for the hat tip! I’d be interested in seeing how you apply this and how you’d style it. Also, after writing this post, I wondered how hard it would be to write a script to create a sitemap by crawling my existing server. Or, how about transforming an XML file with this as the presentational output. Hmmm.
And don’t ya just love the
$(this)in jQuery? That voodoo just saves so much cogitating and coding. If you’d like to apply some YUI voodoo, go for it. Would you mind sharing when you’re finished? It would be neat to see how it compares and we can throw it into the mix here as well.Lastly, by “inline styles”, are you referring to the CSS in the head? In an actual application, that should be dumped into a CSS file and linked from within the head. I just ran it this way so you could see what’s going on with view source.
beTech just rocks, you better map all the goodies around here.
this and the Create a web site CD tutorial.
[…] beTech » CSS SiteMap » Oct 3, 2007 (tags: css web architecture sitemap webdesign **) […]
Great display of standards based html!
One little thing: The examples quirk a little on Opera 9, I got to mend it a little by specifying a 61.25% font-size for the body and 1em line-height for the ul’s.
It’s not perfect (my shot is that the em sized borders are to blame) but close to it! BTW I haven’t tested to see the changes on the ie side, I suppose it just takes some tweaking.
Just being a little picky. It’s a fantastic job!
Marcos: Doh! Ya caught me! Opera 9 does indeed munge a bit, but the workarounds seem to require Opera-specific CSS hacks to prevent the other browsers from pooping out crap. I tried your “font-size/line-height” fix, but it knocks the block alignment in IE and Safari off a bit and it imposes a CSS rule on an element outside the list (which makes me all twitchy and stuff). I also tried applying
line-height:1em;just to.sitemap li, but IE and Safari still go a bit off kilter (example).Another fix that Opera liked, but the others didn’t, was changing the
.sitemap ul ultop margin from -1.4em to -1.6em and the.sitemap ul ul lileft value from 10.4em to 10.6em (as seen in this example). Oi! Are we loving cross-browser CSS yet? At the end of a long day of bouncing around CSS modifications in various browsers, I looked at Opera’s share of our stats and couldn’t justify any more time on the issue. If you have any more ideas, however, I’d love to hear them.[…] CSS SiteMap Ein weiterer Ansatz zur Gestaltung von CSS Sitemaps; dieses Mal werden Seitenbereiche grafisch hervorgehoben. Das Sitemap selbst ist eine geschachtelte ungeordnete Liste. […]
[…] CSS Sitemap Styler: Style your Sitemaps with CSS and JavascriptSitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap. […]
[…] CSS Sitemap Styler: Style your Sitemaps with CSS and JavascriptSitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap. […]
Some people have sitemaps generated automatically. It would be nice if you could import a sitemap.xml file right away.
[…] CSS Sitemap Styler: Style your Sitemaps with CSS and JavascriptSitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap. […]
[…] CSS Sitemap Farvekodet sitemap via css og javascript. […]
[…] CSS Sitemap Styler: Style your Sitemaps with CSS and JavascriptSitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap. […]
You’re example is really good, except for the javaScript. It’s not unobtrustive, you’re still seeing the collapse link when javaScript is disabled. It’s not 2005 anymore
Bo: Agreed. I’d like to integrate an XSLT like this one by Baccou Bonneville, but haven’t had the free time yet.
killerog: You’re absolutely right and I’m surprised Jeremy Keith hasn’t deprecated on it yet. The JavaScript was a last minute, proof of concept addition that I still need to clean up to address the “unobtrusive” issue. I’ll rollout the updated solution as soon as possible. Thanks.
killerog: Well, that was easier than I thought it would be. –Steve
[…] CSS Sitemap Styler: Style your Sitemaps with CSS and Javascript Sitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap. […]
Look real nice but what the about the 100% CPU spike when collapsing and expanding?
Anyway to make not so resource heavy?
@CPU Usage: With what browser are you seeing the spike?
Steve,
Works GREAT in Firefox 2.0.0.11 latest, under XP Pro w/SP2!.
But…in IE 6 (latest version),
the [Expand/Collapse Directories] Button does not show up at all.
(everything else is displayed OK, only that Button is missing!).
So, when loaded in IE 6, the SiteMap displays “expanded”. OK!
But, there’s now way to “collapse dirs”,
‘coz there’s no [Collapse Dirs] Button visible. Argh!
Ray
SF
Ray: Thanks for catching that slip. In the ‘vanilla’ IE6 conditional CSS, I needed to apply a
display:inline-blockto the#sitemap ul ulselector (line 95) to prevent that nasty IE hasLayout condition. Try the corrected code and see if that fixes it for ya.Works great now in latest IE6/XP…
Thanks, Steve & good luck, out West!
Ray
SF
[…] 5. CSS SiteMap […]
[…] 5. CSS SiteMap […]
thanks.. really nice
Nice work. Congrats on the mention in Smashing Magazine.
Smashing Magazine: Powerful CSS Techniques for Effective Coding
problem in your js that prevents the collapse links from showing up; the line “$(document).ready(function(){” errors with “Error: $ is not defined”
this is on Mozilla/5.0 (X11; U; Linux x86_64; en-US; rv:1.8.0.13pre) Gecko/20080207 Ubuntu/dapper-security Firefox/1.5.0.13pre
krishna: Thanks! The site was recently migrated without the JavaScript directory (whoops). All should be good now.
[…] greatly enhance our design vocabulary. 3. CSS Server-Side Pre-Processor 4. Advanced CSS Menu 5. CSS SiteMap 6. Styling File Inputs with CSS and the DOM File inputs (<input type=”file” />) are the […]
[…] CSS SiteMap […]
I found a javascript CSS changer on a list apart (http://www.alistapart.com/articles/alternate/).
This is how you can make it rotate between the two CSS files without creating two separate sitemap pages:
1. Get two CSS files, for this example, name one chocolate.css and the other vanilla.css. Add them to the sitemap page, and make sure each has a unique name for the title attribute (e.g. vanilla and chocolate).
2. Download the javascript file the guy provided, upload it to your server and link to it in the header.
3. Add a link that changes the CSS files.
e.g.
Don’t like this color scheme? Change it! Make it vanilla or chocolate (default)
Ideally I’d like it so that it detected which one was active and only display the other, but that’d probably require some PHP tinkering and it’s nearly 3am and I’m getting to bed :-). I’ll play around with this and post if I figure anything out.
Thanks for providing this great CSS sitemap by the way!
- Mike
ugh, it seemed it did not allow the code for point #3. It’s detailed at the end of the “a list apart” link, so just read that and you should be fine!
Michael: Thanks for the suggestion. I initially considered doing a stylesheet switcher, but then thought that the extra code would confuse those individuals that just wanted to copy the source without having to learn jQuery or even CSS. You may, however, see it in the sequel: “The Bride of CSS Sitemap”.
I really like this a lot. Very usable and innovative. I’m a bit of a noob when it comes to javascript so how would one go about having the subdirectories hidden at first and then using the button to expand?
We love this! We use it all the time now to give our clients an easy-to-read prototype of their sitemap before actually building the site.
We just built http://sitemappers.com/ to help us make these sitemaps (because we’re too lazy to keep typing out HTML).
Go ahead and play with it
[…] CSS SiteMAp […]
Is there a way to make the directories start out in the collapsed position? I think that people would like to see it started out in this position first as it looks nicer seeing the main directories first then expanding to see the sub-navigation.
BTW the best part isn’t the “this” value its the flux-capacitor!
-Daniel
Liked the idea. As a web developer applied some “Common best practices”
http://blog.solutionset.com/wpmu/2008/04/14/html-based-sitmap/ - oops forgot URL
[…] you’re interested in learning more about CSS based sitemaps, check out this article: http://wordpress.betech.virginia.edu/index.php/2007/10/03/css-sitemap/ It’s what gave us our […]
I loved it! thanks guys
[…] 5. CSS SiteMap […]
[…] 5. CSS SiteMap […]
[…] the website navigation easier, can be created using CSS with the “tree hierarchy”. CSS Sitemap uses list tags for the hierarch and formats the user interface […]
so great. really, awesome!
[…] 5. CSS SiteMap […]
[…] 5. CSS SiteMap […]
[…] 5. CSS SiteMap […]
asdfasfdaf
asfasfasfsaf