Spruced-Up Site Maps

by Kim Siever

67 Reader Comments

Back to the Article
  1. Keith, I just tested a third level and (surprise) it works in everything but IE6.

    Copy & paste the code below to embed this comment.
  2. Hi,

    some weeks ago I developed a (in my opinion very nice) sitemap, which displays a very clear semantic and looks also a little bit pretty. I think most of the sitemaps which can be found in the web are boring!

    I have to insert some hacks into the stylesheet because the basic code is rendered very differently in IE and Mozilla for example.

    You can see it here:
    http://www.zabdesign.de/pro/public/sitemap/sitemap-styled.html
    and here:
    http://www.zabdesign.de/pro/public/sitemap/sitemap.html

    Regards from Germany,
    Sebastian

    Copy & paste the code below to embed this comment.
  3. without looking too hard at the css…why not simplify matters and add the class to the actual LI that contains a sublist? would possibly make the whole issue a lot easier…unless i’m missing something fundamental here.

    Copy & paste the code below to embed this comment.
  4. Sometime ago, I did something like this for the navigation of my drupal site http://capmex.biz

    Drupal throws up the navigation menus as lists and it was very easy to style them, I did it overriding the standard bullets with images. I think your approach can be used to style a Drupal navigation menu too, because, it’s very similar to the one I implemented.

    Copy & paste the code below to embed this comment.
  5. When I was reading the part of your article that lead up to the styling of parent items (with the folder icon), I got quite excited. “Gee”, I thought, “the parent items are really the same as the other list items, in terms of their position in the document hierarchy. How are you going to style them differently, without resorting to giving them a new class?”

    Because this is ALA, I was certain that I was about to discover one of those really cool, really clean, really “now why didn’t I think of that before” techniques that I’ve discovered in so many other articles here. Perhaps you’d use some obscure CSS selector, such as the adjacent sibling selector. Perhaps you’d show us some kind of pseudo-recursive logic that suggested that maybe we could isolate those list items that contain other (nested) lists inside them. Whatever it was, I knew it would be funky.

    I was wrong.

    You did the most obvious thing in the world. You gave the parent list items a different class, and then applied the folder icon to that class. You didn’t show us any ‘smart’ solution whereby we wouldn’t have to tag every single parent item in the list. You said you wanted to avoid scripting, but in my opinion a scripted solution would have been far cleaner. At least a script could automate the tagging of parent items.

    I for one found this very disappointing. ALA has a reputation for publishing things that are innovative, not things that are obvious. It’s time that reputation was upheld once more.

    Copy & paste the code below to embed this comment.
  6. Patrick,

    The background images are attached to all of the anchor tags. I see your point though and I don’t thin there is a difference between “li a.parent” and “li.parent a” except one is probably more semantic.

    Jeremy,

    Actually in the first draft of my article, I did exactly as you had wished the article had done. Unfortunately, the editors suggested I make the parent list items links as well. That completely changed how things were going to work.

    So what you want can be done, but not if the parent items are links as well. at least, not as far as I was able to determine.

    Copy & paste the code below to embed this comment.
  7. Hi Siever,

    I’m not sure I’m thinking right here, and also this is not my mother tongue, so please be kind to me if I suggest something obvious.

    Anyway. Wouldn’t it be possible to style all links, both “parent links” and “children”, with folder images, addressing them with “.sitemap a”, and then style all child links (overriding the style above) with “files images”, addressing them with “.sitemap ul a”?

    The only problem I see with this (although I’m the first to admit this is a very serious limitation) is that you will only be able to have two levels of links: parents and children; no children with children. As long as we know the information will only be in two levels, wouldn’t this be a possible solution, avoiding the “parent” class?

    Best wishes.

    By the way, I do also agree with this article being a little to simple for ALA, but I can understand that if it was a while since you wrote it. Still, just as Jeremy, I was a little disappointed. I would be glad to find out how to address the parents and children without using a “.parent” and with the code being flexible enough for 1, 2, and many levels of information.

    Happy Aprils Fools Day, everybody.

    Copy & paste the code below to embed this comment.
  8. Hi again. Please have a look at http://www.paraxelsson.se/hybrid/ for an example of what I meant in my earlier comment.

    Bye everyone (and thanks for a lovely magazine)!

    Copy & paste the code below to embed this comment.
  9. Pär,

    The “problem” with that is that using a folder indicates that there should be containing files. I wanted a structure where the folder icon would only show up if there was a nested list. If there was no list, I wanted a document icon.

    Copy & paste the code below to embed this comment.
  10. ah, i see…thought you were applying the document image to the li, not the actual link. in that case sure, it doesn’t make much difference whether you apply the class to the link or the containing li.

    Copy & paste the code below to embed this comment.
  11. Ah. Stupid me. Thanks for telling me that in a nice way, Kim! :o)

    Copy & paste the code below to embed this comment.
  12. 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

    Copy & paste the code below to embed this comment.
  13. 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.

    Copy & paste the code below to embed this comment.
  14. 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/

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. 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.

    Copy & paste the code below to embed this comment.
  17. 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.

    Copy & paste the code below to embed this comment.
  18. 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.

    Copy & paste the code below to embed this comment.
  19. 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

    Copy & paste the code below to embed this comment.
  20. has anyone ever run across the situation where “bullets” sporadically disappear when implemented as the background image for <li> elements? can anyone point me toward a fount of knowledge on what causes this glitch? (ie6)

    Copy & paste the code below to embed this comment.
  21. 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…

    Copy & paste the code below to embed this comment.
  22. 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…

    Copy & paste the code below to embed this comment.
  23. 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.

    Copy & paste the code below to embed this comment.
  24. 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.” ;)

    Copy & paste the code below to embed this comment.
  25. What do you tell on this site-map/ul style?
    Sorry for czech lang of site.

    http://www.pcsp.cz/mapa-serveru.php

    Copy & paste the code below to embed this comment.
  26. 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!

    Copy & paste the code below to embed this comment.
  27. I always thought sitemaps were for search engines.  This actually makes a sitemap navigable by a human.  Very cool.

    Copy & paste the code below to embed this comment.