Ask SM: How Do I Create A Colorful Sitemap With jQuery?

Advertisement

We like to experiment with new ideas and concepts. We like to challenge ourselves and provide our readers with new formats. This post is the first in our “Ask Smashing Magazine” series, in which well-known developers from the web design community answer our readers’ questions and suggest solutions to common problems.

Today, we are glad to welcome Chris Coyier1, who you may know from his articles on CSS-Tricks2, to our Smashing Magazine Editorial Team. From now on, Chris will regularly answer your CSS- and jQuery-related questions and present answers to the most interesting, useful and original ones in his articles on Smashing Magazine. Welcome, Chris!

Of course, you can send any CSS- and jQuery-related question you want. To ask a question, you can do any of the following:

  1. Send an email to Chris at ask [at] smashingmagazine [dot] com with your question,
  2. Post your question in our forum3, you will need a signup (yes, the forum is not officially launched yet, but it is running!),
  3. Or, if you have a quick question, just tweet us @smashingmag4 or @chriscoyier5 with the tag “[Ask SM].”

Please note: Chris will do what he can to answer most questions, but he will certainly not be able to answer all of them. However, we hope that our forum may help you to solve your problem in case Chris couldn’t help you out.

How To Design A Colorful Sitemap With CSS And jQuery?

Let’s start with the first question from one of our readers:

“I was asked to design a sitemap for our new corporate project, but I wasn’t able to find any good tutorials on the Web. Could you help me out? We are looking for a well-organized, clean and colorful sitemap with dynamic effects (jQuery-based if possible).”

Martin Tortier

Chris Coyier answers:

Content-heavy websites with a deep navigational structure can benefit from sitemaps. A sitemap contains links to every important page on a website, often visually organized in a hierarchy. They generally should not have opening and closing mechanisms to display the hierarchy. If you are forcing someone to click five times to drill down to what they are looking for, that is “navigation,” not a sitemap, and isn’t very helpful. Having every link visible at once is ideal for people searching the page for what they are looking for. Admittedly, though, visually browsing a large and deep sitemap can become confusing quickly.

In this demo article, we will build a visually interesting sitemap that makes the hierarchy clearer through the use of color.

example6

View Demo127 | Download Files138

Semantic HTML Markup

The perfect HTML structure for a sitemap is the unordered list (<ul>) element. Each list represents one layer of the hierarchy. We can nest lists inside of other lists to build downward and complete the sitemap hierarchy.

We will use a typical university as an example. University websites are often monstrosities of content, with pages ranging from information about the campus and admissions to sports to academic work to alumni foundations. Let’s take a look at some clean unordered-list markup.

 <ul>
  <li>
    <a href="#">Visiting Campus</a>
    <ul>
      <li>
        <a href="#">Tours</a>
        <ul>
          <li><a href="#">Undergraduate</a></li>
          <li>
            <a href="#">Walking</a>
            <ul>
              <li><a href="#">Guided</a></li>
              <li><a href="#">Unguided</a></li>
            </ul> <!-- END Walking -->
          </li>
          <li><a href="#">Group</a></li>
          <li><a href="#">Field Trips</a></li>
        </ul> <!-- END Tours -->
      </li>
      <li><a href="#">Campus Map</a></li>
      <li><a href="#">Events Calendar</a></li>
      <li>
        <a href="#">Athletics</a>
        <ul>
          <li><a href="#">Football</a></li>
          <li><a href="#">Baseball</a></li>
          <li><a href="#">Soccer</a></li>
          <li><a href="#">Volleyball</a></li>
        </ul> <!-- END Athletics -->
      </li>
      <li><a href="#">Arts</a></li>
      <li><a href="#">Science</a></li>
      <li><a href="#">Hospital</a></li>
    </ul> <!-- END Visiting Campus -->
  </li>
  <li><a href="#">Admissions</a></li>
  <li><a href="#">Student Life</a></li>
  <li><a href="#">Academics</a></li>
  <li><a href="#">International</a></li>
  <li><a href="#">Research</a></li>
</ul>

This markup, all by itself and completely unstyled, serves as a completely useable sitemap.

example

Styling with CSS

Some very simple CSS will have this boring ol’ list spiffed up in no time. Indenting each child list, just as the browser does by default, makes good sense for establishing a hierarchy. We’ll keep that idea but house each list in its own box. We’ll shade the background of the boxes in shades of gray, from darkest gray at the “base” of the page (or highest level in the hierarchy) to lightest gray at the “top” (or lowest level in the hierarchy).

ul                { padding: 8px 25px; list-style: none;
                    background: #282828; }
ul ul             { background: #393939; }
ul ul ul          { background: #4b4b4b; }
ul ul ul ul       { background: #5a5a5a; }

Of course, we have already performed a basic CSS reset, set up some basic typography and applied some background images for extra spiffiness. You can view the complete CSS9 if you want to see it in its entirety. Here is what we have so far:

example

Bonus CSS for WebKit Browsers

Our effect is starting to look like boxes stacked on boxes. For a bit of progressive enhancement, we can build on this look with the CSS3 box-shadow property. Currently, only WebKit browsers support this feature with a proprietary extension, but it works! To create this effect, add this CSS:

ul { -webkit-box-shadow: 2px 2px 5px black; }

example

Hey! Why do those inner lists look faded out like that? Don’t worry, that doesn’t have anything to do with the drop shadow. We are going to be working with that in our next step!

Adding the Color Effects with jQuery

We are going to use the jQuery JavaScript library to really make this sample sitemap sing. Remember, the goal is to keep the hierarchy defined through use of color. The idea here is, when the mouse cursor hovers over a list, that list will brighten up a bit and fade to a unique color. When the mouse cursor is removed, the list will return to its original color.

For example, our “outer” list will fade to a purple color when the mouse hovers over it. This is a distinctive effect and allows your eye to follow the purple border and see all the other list items that are a part of that list, despite it being broken up by sub-lists.

We will be animating both the color and opacity of the list. jQuery can animate opacity out of the box, but animating color requires use of the jQuery color plug-in.10 For the sake of speed, let’s load jQuery from Google, and then link to our own JavaScript file where we’ll be writing our code:

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.2.6");
</script>
<script type="text/javascript" src="js/jquery.color.js"></script>
<script type="text/javascript" src="js/sitemap.js"></script>

Now we can dig into our own sitemap.js file. The first order of business is to execute our code only when the DOM is ready for it. Then we will set the opacity level of each of our lists to 50%.

$(function(){

   $("ul").css("opacity", "0.5");

   // Do fading stuff

});

Avoiding Repetitious Code, Building a Plug-In

Each of our lists will get the same “fading” effect, but each will be just slightly different in that it will fade to a different color. To avoid a bunch of unnecessary and unwieldy repetitive code, let’s abstract the fading effect into a simple plug-in we’ll call “doFade.”

Now we can call that plug-in function on each “layer” of the list and pass the color with a parameter.

$(function(){

   $("ul").css("opacity", "0.5");

   $("ul").doFade({ fadeColor: "#362b40" });
   $("ul ul").doFade({ fadeColor: "#354668" });
   $("ul ul ul").doFade({ fadeColor: "#304531" });
   $("ul ul ul ul").doFade({ fadeColor: "#72352d" });

});

Let’s take a look at the entire function and discuss its functionality a bit.

jQuery.fn.doFade = function(settings) {

    // if no paramaters supplied...
   settings = jQuery.extend({
      fadeColor: "black",
      duration: 200,
      fadeOn: 0.95,
      fadeOff: 0.5
   }, settings);

    var duration = settings.duration;
    var fadeOff = settings.fadeOff;
    var fadeOn = settings.fadeOn;
    var fadeColor = settings.fadeColor;

    $(this).hover(function(){
     $(this)
         .stop()
         .data("origColor", $(this).css("background-color"))
         .animate({
             opacity: fadeOn,
             backgroundColor: fadeColor
         }, duration)
   }, function() {
     $(this)
         .stop()
         .animate({
             opacity: fadeOff,
             backgroundColor: $(this).data("origColor")
         }, duration)
   });

};

The function accepts parameters passed to it that it reads as “settings.” The first thing we do is set defaults for those settings, in case the function is called when they are not supplied. This is exactly the case of our code, because we will provide the “fadeColor” but not the duration or fadeOff or fadeOn values.

  • fadeColor: the background color that the element will fade to.
  • duration: how long the animation takes to complete, 1000 = 1 second.
  • fadeOn: opacity percentage when element is hovered on, 0.95 = 95%.
  • fadeOff: opacity percentage when element is not hovered on, 0.5 = 50%.

Then we set up the hover function, which binds itself to the element that we called the function on. Hover is actually two functions. The first runs when the mouse hovers over the element, and the second is a callback function when element is no longer being hovered on, essentially a mouseout.

We do three things in the first function. First we .stop(), which ensures any animation being run on the element is stopped. This prevents animations from queuing if the element is hovered on and off quickly, which looks awkward. Then we use jQuery’s brilliant .data() function to store the original color of the element. Remember, each of our lists has its own unique shade of gray; so to avoid hard-coding nonsense, we’ll just auto-detect this color with the .css() function and save it to a variable we’ll call “origColor.” Then we animate both the opacity and the background color to the settings.

In the callback, we’ll again .stop() the animation. Then, all we need to do is animate it back to the original color (which we have stored) and revert to the “off” opacity value.

So there you have it, Martin!

example11

View Demo127 | Download Files138

Become the author of the “Ask SM”-section!

Please notice that we are looking for professionals and experts who know Photoshop, Illustrator, PHP or Ruby On Rails and have a long experience with these tools / languages.

If you can regularly answer questions from our readers (in posts on SM, in the forum or on Twitter), please let us know14. We’ll pay you, of course.

What should the new section focus on?

What do you think about the new section on Smashing Magazine? What should it focus on? What problems and solutions would you like to see covered in our posts?

Please vote in the poll and let us know how we can improve this new section on Smashing Magazine by commenting on this post! Your input is very important to us! Thanks.

(al)

↑ Back to topShare on Twitter

I create websites and help others create better websites through writing and speaking. I consider myself a lucky man for getting to work in such a fun and rewarding field.

  1. 1

    kind of neat.

    0
  2. 2

    This is very cool. An extra layer of niceness to your sitemap. Something to use in the future. Thanks for putting this together.

    0
  3. 3

    Very neat result Chris!
    Thanks for sharing.

    1
  4. 4

    That’s just plain strange. Why would anyone need that? lol

    0
  5. 5

    this is really nice. chris is amazing!

    0
  6. 6

    I agree with #4. Seems a bit over the top for a sitemap :S

    0
  7. 7

    Short and nice ideas in this post :). Thanks SM.

    @#4: It’s true, nobody use it, but is so beautifull

    0
  8. 8

    Hmm, I can’t help thinking that using jQuery just for the colourful hover effect is not the right thing to do. It would be better just to use the :hover css method to colour the boxes and control the opacity.

    Isn’t CSS supposed to be for styling and javascript for functionality and interactivity?

    0
  9. 9

    @#8: CSS for styling, but here is a fade animation too.
    But if you don’t use jQuery (or some other fading animation) for other parts of your site then just for the sitemap I think it’s pointless too. :)

    0
  10. 10

    Love this tutorial! Thanks, SM and thanks Chris for the great tutorial.

    For my vote, I went with “Others”. Maybe you can do Ask SM on various tutorials with great insight or something special?

    Keep it up, SM!

    0
  11. 11
  12. 12

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

    0
  13. 13

    I have to say interesting view, but I believe the sitemap is more utilized by search engines. By using AJAX libraries you increase the load time for no real benefit to the user or the spiders. As for the user, I think the simplicity makes for great usability. Your example of “bad sitemap” is a completely unstyled unordered list with links.

    IMO you should just style it in CSS and leave the JS out!

    0
  14. 14

    Loooooooooove the color scheme !!!

    0
  15. 15

    It may be colorful but it is still an awful ugly horrible sitemap

    0
  16. 16

    I Guess not too attractive for me after all coz it’s look like hell…. I expect more from SM… maybe new manipulation can give us cool look !! Thanks Anyways…

    DKumar M.

    0
  17. 17

    man, i know its just an example, but thats hideous.
    instead of helping me find a link, it just pissed me off.
    there’s got to be a much better use of jQuery here.

    0
  18. 18

    Nice tutorial, really Chris is amazing !
    Thanks Smashing Magazine

    0
  19. 19

    cool….
    but .. why you use that fonts..??
    I just don’t agree for the fonts.

    0
  20. 20

    yeah .. dont know about that! First thing I’m not interested in! :( sry

    0
  21. 21

    Wow… Good example of “Technology push”. Let’s use the technique because we can..
    Sorry to say but I expected something better from SM. Hope to see some usefull tricks/tuts in the future.

    0
  22. 22

    I think without the shadow effect it is a little bit too dark. Maybe it could be added using jQuery…

    0
  23. 23

    Chrome adds an ugly border thingy around the boxes, just so you know. It looked good in firefox though.

    Anyway, isn’t this a bit too much? I like the idea, but it just seems too fancy for a sitemap. But defiantly interesting, and looks very cool.

    0
  24. 24

    Interesting principle, poor realization in fact.
    The color scheme isn’t nice at all (sinister for me). JQuery is really poorly used compared to what can be done with it, fading seems here to be a gimmick. The layout isn’t attractive.

    One interesting thing that I didn’t know is the loading of JQuery from Google. Is-it really usefull ?

    I know it’s easier to criticize than to make it, but I really think that a better user experience and look-and-feel could be achieve with HTML/CSS/Javascript.

    0
  25. 25

    The post title is grammatically incorrect. If you want it to be a question then you should have written it as, “How do I create…”, not “How to create…” – The current post title is a statement, not a question, and should therefore have no question mark at the end.

    I enjoyed the post’s content, Chris always has something interesting to write about.

    0
  26. 26

    i dont know of anyone who would go through this effort for a sitemap!!

    0
  27. 27

    What an interesting concept and idea. Chris and SM, this is exactly my taste. You’ve accurately described the whole procedure for an amateur like me. Thumbs up.

    0
  28. 28

    Very nice. Anything that makes people think more about sitemaps and a site’s IA is a bonus in my opinion. Instead of layering up, I’m sure you could use inner shading to give the impression of moving deeper into the site. Not saying this would be better, but it would be cool to build an example doing that.

    Good stuff.

    0
  29. 29

    [The post title is grammatically incorrect. If you want it to be a question then you should have written it as, “How do I create…”, not “How to create…” - The current post title is a statement, not a question, and should therefore have no question mark at the end.]

    I second this. Seriously, you should hire a proper proofreader. Nearly all your articles contain embarrassing mistakes and it really brings down the content of the site.

    0
  30. 30

    lovely..

    0
  31. 31

    Seems like a really strange solution to a non-existant problem to me… what’s the idea behind all of the space to the right of the text?

    0
  32. 32

    Nice effect! We took a slightly different approach to CSS sitemaps—using jQuery to collapse/expand the nodes.

    0
  33. 33

    sitemaps are not made to be customized. what’s the point?!?! they are there just for SEO indexing

    0
  34. 34

    To all those whom are bashing the article:

    Why would someone use this over the top sitemap? I don’t know, but apparently somebody asked the question and it was answered. I don’t think SM or Chris expects every article to please everyone. If you don’t want to use it, then don’t use it.

    What a bunch of whiners.

    0
  35. 35

    I don’t usually respond to forums. But, I have to agree with Jarod T.. Being relatively new to web design I find myself taking in as much as I can and leaving out what I don’t like. I happen to like this technique, though I might change colors, font, and maybe the layout a little to suit to my own taste. I think a lot of you are way off base in your criticism. Most of what is done in web design or any design is a matter of taste.
    On the flip side a lot of what is done is a matter of standard or what people come to expect (usability). I think this effect can in some ways add to a site. Some may not particularly care for how it was implemented here but surely you can take this technique and play with it. Web design is discovery.

    0
  36. 36

    Articles like this should include a browser compatibility chart. All the gee-whiz factor in the world is pointless if 75% of my users can’t see it.

    0
  37. 37

    It doesn’t even look like sitemap anymore, It looks like a big blob of wtfness.
    Perfect example how not to use JavaScript. I just see no point in to include a whole library to do a fade effect..

    I agree with #19 using fonts would make it allot better.

    0
  38. 38

    I think that, whatever people are saying, this is a useful idea, I can easily see this fitting in with some site designs and genres, and even if it’s not to your liking, something can be learned from the making of it, in the jQuery.
    All in all, I like ^_^

    0
  39. 39

    This feature would be very annoying if I came across it. I’m at the sitemap because I couldn’t find information on your website. Why are you making it more difficult for me to eye-scan what I’m looking for?

    0
  40. 40

    Unless your doing a designer portfolio I don’t see the point. You need to be pretty piss off of looking in a website to go in a sitemap, Imagine how you will be piss off when you get there and see this thing…

    0
  41. 41

    Thanks Chris,
    So far all of your articles(this included)
    have been useable techniques explained
    in down to earth understandable terms.

    Also, how many of the above complaints
    came from people that are on the
    Smashing Magazine Editorial Team?

    Doesn’t appear to be any E-Meyer’s,
    S-Nicholls’, D-Shea’s type-o-heavy weight web
    contributors crying about this article.

    keep ‘em comming bro, Thanks

    0
  42. 42

    Very creative! Thanks for sharing SM and Chris. This site is a fantastic opportunity to share and learn.

    @Hot Headed Comments: Think before reacting. Don’t let your unconscious mind degrade the discussion. Here’s a great article on such unconscious behavior and how we can all gain from a collaborative collective consciousness.

    0
  43. 43

    The unstyled version is easier to read at a glance.

    If you’re not improving on something, then you’re just digital-fellating yourself.

    0
  44. 44

    not a good tutorial.

    0
  45. 45

    Richard Angstmann

    January 24, 2009 4:21 am

    A great tutorial Chris. I like the end result, especially in Safari, with the shadow effects. I can understand that it might not be to everyone’s taste, but surely that goes for every piece of layout, design or funky effect thats out there. Its all subjective. The key to this is how it was achieved, the processes used to achieve the effects, surely?

    0
  46. 46

    Muy Bueno!!!!!!

    0
  47. 47

    You should change not use only -webkit-box-shadow. If you are going to use special CSS3 that sometimes needs prefix, always do all 4 versions because Safari isn’t the only browser that supports box-shadow:
    -moz-box-shadow for Firefox 3.1+
    -webkit-box-shadow for Webkit
    -o-box-shadow for Opera (not sure if Opera supports it)
    box-shadow for browsers that support it without a prefix

    0
  48. 48

    Come on, what’s gotten into everybody???

    It’s a unique approach and it should be treated as one.

    Some have gone from saying it’s bad, to saying grammar is not correct on SM….well, if grammar is not correct, why is SM so popular and has 100k+ subscribers? Do you really think one cares if I say “me and John” or “John and I” ???

    Open your eyes dudes, this was served free by SM, and instead of welcoming a courageous new technique, you make fun of it…

    0
  49. 49

    Did anyone pay for this? Don’t like it? Don’t use it. Don’t like the colors? Change them. #34 is right. What a bunch of Prima Donna’s!

    SM/Chris, the vast majority of us appreciate your time and efforts. Thank you and keep it coming.

    0
  50. 50

    I agree that most SM articles are really good, it’s why we are hundreds of people reading it. Though, I don’t think that because you didn’t pay for it, you cannot give your opinion.

    Ok, I can claim : “It’s great”, “Colors are really beautiful”, “What a great concept?”. But, it’s not what I’m thinking. I can also say nothing. But, in this case, what’s the point of opening comments? We’re on a blog guys, it’s social, it’s normal that some of them love this article and others don’t.

    The problem is not having bad criticisms, it’s having constructive criticisms. Look at the link posted by #32, it’s for me a far better example of what can be realized with jQuery on a site map.

    Perhaps a compared study of some dynamic site maps could bring this debate higher and show to all of us the way to go on this. I find few examples of dynamic ones searching by Google. Have some of you been luckier?

    A site map must show easily all the information at first sight. I find difficult to read the site map of Chris in it’s non-hover state. I think you also must be able to rapidly focus on what you search. One point for Chris because hover color is a good way to highlight sections. Perhaps an even better way would be to filter/highlight the site map thanks to a text box to give user the ability to search for some words.

    Thanks #43 for your link, the way to go for good comments.

    Keep it on guys, you do great work. Love Smashing.

    0
  51. 51

    I’ve encountered serious performance problems (=mouse hangs and then “jumps” over the page) when mousing frequently over the sitemap. Using FireFox 3.0.5 on Windows XP.

    0
  52. 52

    Bah Bow from me here too, it looks like an fugly menu system rebadged as a “site map”. The aim of any design (even one knocked up by a colour-blind programmer) is to clearly and effectively convey the message particularly to those who would least understand the concept you’re pushing.

    0
  53. 53

    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 this site as well as his own. Evidently SM liked this article enough to put it out as a use of information that may help at least somebody.
    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 or present material in their website.
    Tossing out something due to thinking YOU could do better, don’t think it is relative to you or have a negative opinion about it, doesn’t mean it isn’t helpful to someone else. You don’t have to read the article, no one is 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 or find another use for it.
    If you don’t like it, then don’t use it. Simple as that.
    Props Chris for the article.

    0
  54. 54

    One suggestion: you should move the setting of the original colour using data() to outside the hover() function – currently if you move very quickly over the elements, the stop() function means that the colours can get stuck half-way.

    0
  55. 55

    I really like the idea for this series. However, I’m not a fan of the article, it makes very little sense. What you’ve done could very easily have been achieved using just css, there’s no need for JQuery at all.

    Why not just put hovers on each of the li’s? It’d be alot quicker and there wouldn’t be a need to load additional JS files.

    0
  56. 56

    Alike many of the previous comments made, I would say that the use of JQuery is a bit pointless for this task and could of been done with CSS. Albeit said Chris has provided us with a great tutorial and it’s clear that he has a lot of skills; great job.

    0
  57. 57

    Ficou muito bom, não entendi qual a utilidade prática mas ficou muito legal .

    0
  58. 58

    I don’t see why some people are hating on this? Aren’t site maps a good thing to have if you have time and the inclination to put them onto your site? Some users would rather go to your sitemap than go through all of your dropdown menus or what have you in order to reach a page.

    I think that this is a good solution compared to what we would normally do; use plain html in an unordered list most likely with no effects whatsoever. Why not make it prettier? Plus it gracefully degrades.

    BTW: Those of you saying that site maps are useless or not necessary obviously don’t really appreciate accessibility.

    0
  59. 59

    To extend this, say you had a ul with loads of li in them and you want to make the sitemap as a heirarchical menu by dragging the li’s to the sitemap, how would you go about this? I guess jQuery Sortable would be used some how. Any help gratefully received

    0
  60. 60

    Great sitemap, gonna use it sometime, thanks.

    0
  61. 61

    Been looking for a unusually Site map I could use on my website. This is what I was looking for. I’ll tweak to my liking.

    0
  62. 62

    Nice. Implemented it. Works. Like the jQ Fade action. Straight CSS wouldn’t look as sexy.

    0
  63. 63

    you are a loser

    0
  64. 64

    What is point of sitemaps? I never used them, because it’s less usable than standart navigation. Too many links.

    0
  65. 65

    Interesting idea, but the plain list of links is more usable, particularly since the sitemap’s Jquery stuff is only activated by the mouse and not tabbing to the links.

    0
  66. 66

    Usability-wise, this is bad. Cool factor-wise, this is interesting. I think this is what people are trying to say here.

    0
  67. 67

    You are wrong

    0
  68. 68

↑ Back to top