Grow your CSS skills. Land your dream job.

Smashing Sitemap

Published by Chris Coyier

I wrote up an article for Smashing Magazine on creating a colorful sitemap with jQuery. It covers all kinds of things, like semantic markup, enhancing with CSS3, building a quick jQuery plugin to avoid repetitive code, and more. Links to the example and the download are over there!

The article is also an introduction to me as a new writer over there. I'm going to be doing Question & Answer articles every few weeks or so. The focus will be CSS but I imagine that'll cover web design in general like we do around here. Details about submitting questions also over there in the article.


  1. No ofence, I appreciate some of your work but this is useless, there’s no point in customizing a sitemap or anything in this matter (maybe a menu but it’s no too esthetic), plus I don’t think you fit the description for a SM author, your tutorials are beginner oriented and SM is about anything but beginners

  2. Jarod Taylor
    Permalink to comment#


    Apparently SM disagrees with you.

    Also, try using spell check if you’re going to arbitrarily rant on someone’s blog that you obviously know nothing about.

    Congrats, Chris!

  3. Permalink to comment#

    so is there extra qualifications you need to write a sitemap now??? Jeeze, why no one tell me…..

  4. Ditto what Jarod said.
    Congrats on the article, Chris!

  5. Spank McMonkey
    Permalink to comment#

    Again. Thanks for showing us how NOT to display a site map.

    • I understand that you don’t like it, but if you want to participate in the conversation it would be a lot more helpful if you could help us understand how YOU would display a sitemap, or at the very least, what exactly it is you dislike so much about this take.

      Also bear in mind no example I ever provide for a demo is meant to be just taken and used “as is”, they are largely proofs of concept meant for people to learn from and adapt the concepts to their own projects.

      But that’s pretty obvious right, they are TUTORIALS.

    • Spank McMonkey
      Permalink to comment#

      A sitemap is to completely ensures that visitors will have no trouble navigating your web site and help crawlers/spiders easily look through your site. It should be kept simple and clean. Text should be easily read.

      Your consent fade in and out is just over doing. The text that blends in with everything would make it hard to read.

      I think it could have been better executed if you used the concept for something other than a sitemap.

      I understand it’s just a tutorial and shouldn’t be used as is. But when your blog is about a sitemap I thought it would have more useful info.

      I know you do good stuff. I enjoy most of your tutorials, this one just seemed pretty amature for you and SM.

    • The question I was answering specifically asked me to make it colorful and to use jQuery. But I totally understand how this can feel “over the top” for a sitemap.

      Regarding “amateurish” – Creating a jQuery plugin from scratch, enhancing with CSS3, focusing on accessible and semantic markup, and creating a design around it…. that’s about as complex as we are ever going to get around here.

    • lol: accessible and semantic markup: some basic ul tags, CSS3: webkit shadow, that’s not CSS3, it’s a webkit specification, jquery plugin: IT HAS 44 LINES, that’s not a plugin, not to mention the basic use of hover() (thought about adding another list in the sitemap?). in other words: this is how NOT to use javascript behaviours and NOT how to display your sitemaps. move along now

    • This is getting fairly tiresome, but I’ll stand up for it one more time.

      Yes, it’s unordered lists. That DOES make it semantic. There are lots of different ways to makes boxes with links in them with HTML. In the case of a sitemap and a bunch of links in a hierarchy, it is the best semantic choice. That’s all.

      Box shadow IS CSS3. It’s a browser extension right now, because the full spec isn’t done and WebKit is doing us a favor and letting us use it early so we can get used to working with it and test for bugs.

      Since when does the number of lines of code determine if something is worth being a plugin or not? It saves what would otherwise be repetitive code. I’ve seen some pretty genius one line plugins before.

      So again, if you want to continue to be a part of the conversation, let’s stop with all the rudeness and talk about ways you could IMPROVE it or at least specifics on what you don’t like.

    • there’s no way and no reason to improve a sitemap, sitemaps are there just for indexing and accessibility issues, the whole point of customizing it with CSS browser specs, jquery, patterns and other stuff is pointless because your everyday user doesn’t need that, most everyday users don’t even know what a sitemap is, of for that purpose what it does, for them it’s just some links. sorry I was being rude but that’s my honest opinion and I stand by it

    • Lisa Clarkson
      Permalink to comment#

      Just wanted to reiterate what Chris wrote:

      “The question I was answering specifically asked me to make it colorful and to use jQuery.”

      @Razvan Pavel: your “honest opinion” manages to be rude, arrogant, and off-the-mark at the same time. I suppose if SM wanted to hire you to write an article on this topic your response would a full-page screed basically saying”What a stupid question”.

  6. Permalink to comment#

    I think it is amazing. There is a serious usability there.

    Besides the standard “lists hierarchy”, colors help a lot too.

    For me, it can make a long list where it is hard to see the right thing easier to navigate.

    The idea itself is great. Thanks.

  7. Chris
    Permalink to comment#

    Hey Chris I’ve noticed more and more of your tutorials are using jQuery. Some are even focused on jQuery. Have you thought about branching of your site and make maybe a jquery-tricks site. =)

    That would be awesome.


  8. Chris,

    I like this tutorial a lot. It draws in three major elements that complete a great webiste: user interface, dynamics to excite what is normally boring, and it also retains the ease of accessing internal resources of a website whether it be displayed in a 404 page or a sitemap page.

    Using jQuery makes the boring fun, and still useful!

    I’m a def a fan – keep up the excellent work :)

    • Permalink to comment#

      This 404 reference is a great point. Although a regular visitor may not come across a site map, there is a chance (unfortunately) that they will get lost somewhere on a broken link or typing in the wrong url. In that case, this is an excellent reason for the site map to be visually enhanced.

  9. TheDoc
    Permalink to comment#

    I certainly would’ve used some different colors, c’mon Chris! haha

    I think it’s pretty cool though. Site maps can certainly miss the mark in a lot of cases, but I think this does a good job at showing levels and provides an ease of navigation; which is exactly what a site map is supposed to do, right?

  10. Permalink to comment#

    Hey Chris,

    I enjoyed the article for what it was, just a fun and colorful way/idea for a sitemap. Pay no mind to the naysayers, they can be found on every article ever written. Rock on man!


  11. I’ve never seen something like this, it’s a cool proof of concept. I really dig the interactions between the different levels, very smooth animations too.

  12. Wow, so much negativity! Nice writeup, I liked the article. Keep up the good work!

  13. I think that this actually a useful article, Chris. Thank you very much for answering the question and publishing this. Aside from the color choices (which I know are only arbitrary), a visibly pleasing sitemap is very valuable for many reasons. A visually pleasing hierarchy is a very friendly approach–it is accessable to people who have little experience dealing with sitemaps and/or have a difficult time navigating sites (which could also be the designer’s fault, but that’s another issue). While some elements are unnecessary (e.g. fade), these are subjective as it really depends on the site it is designed for.

    The elements that really need to be in a sitemap–regardless of styling–are: readability at a glance and brevity of code (for spiders). Essentially, you maintain both (your file sizes are still relatively small). The entire point of this article is to answer a question, which it does. In the process, though, it addresses the purpose(s) of sitemaps and how to improve said purpose(s). This article focuses on humans (the code is already optimized for spiders), and I think that you have accomplished both both the task at hand and the re-examination of the nature of sitemaps.

    Thanks, and good job Chris!

  14. Holy crap you people are such babies. It’s just a tutorial for crying out loud! Chris can post what ever he wants here if you don’t like it then too bad. I personally thing its a wonderful idea and although maybe not the best way to display a sitemap, you can still take away some pretty helpful knowledge. So quit giving him a hard time for trying to help you.

  15. Noel
    Permalink to comment#

    cheers chris, keep up the good work

  16. Excelente, Gracias!

  17. Permalink to comment#

    Nice, it’s great. Although the padding is a little off in Chrome, look here.

  18. Carlos
    Permalink to comment#

    I liked it. It is fun and innovative. It is a tutorial and if you want to use if for a sitemap, fine, if not fine. Oh well. It is nice to see the use of mixing CSS and JQuery and some other plugins to accomplish something. I am new to jQuery and some of the CSS3 stuff. I know CSS2 pretty well. This stuff helps out tremendously.
    There are always ways to do thing differently, better, or worse. The fact is that Chris here is providing some knowledge on his own site, as well as, a site (SM) that accepted his article.
    These are used in an example of the sitemap, it can be used for other things. There are people who probably know other ways to do things. There are no real “rules” or laws to making a site map. Or anything else using GUI controls for that matter. It is a preference of the designer or developer in how they want to make their site look.
    Tossing out something due to thinking YOU could do better or have a negative opinion about it does mean it isn’t helpful to someone else. You done have to read the article, no one forcing you to use the ideas presented here, no one is forcing you to waste your time. Just because you don’t like it doesn’t mean somebody else won’t like the idea.
    Props Chris for the article.

  19. Carlos
    Permalink to comment#

    Also about negative comments instead of constructive comments here is a great article everyone should read. Just like the little squirmish Chris and other have gotten into here, Chris does the right thing by pressing a constructive conversation on ways to improve things. We aim to improve the web not criticize eachothers ideas. Share ideas and gain knowledge is the way to go. read the article it is good.

  20. Permalink to comment#

    For those who are commenting that this tutorial is useless “Nothing is useless”. Every single piece of knowledge provided without a price tag is valuable to may readers. I usually don’t comment on sites where tutorials are provided for free because I don’t have the right to offend a person who is being useful to people who want to learn something. Razvan, Why don’t you show us something better ??. Respect others work and be polite. If i were him, would have deleted the comment.

    Nothing is Useless Razvan

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".