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? Link

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 Link

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 Link

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 Link

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 Link

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 Link

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! Link

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? Link

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)

Footnotes Link

  1. 1 http://chriscoyier.net/
  2. 2 http://css-tricks.com/
  3. 3 http://forum.smashingmagazine.com/viewtopic.php?f=10&t=272
  4. 4 http://twitter.com/smashingmag
  5. 5 http://twitter.com/chriscoyier
  6. 6 http://css-tricks.com/examples/Sitemap
  7. 7 http://css-tricks.com/examples/Sitemap
  8. 8 http://css-tricks.com/examples/Sitemap.zip
  9. 9 http://css-tricks.com/examples/Sitemap/style.css
  10. 10 http://plugins.jquery.com/files/jquery.color.js.txt
  11. 11 http://css-tricks.com/examples/Sitemap
  12. 12 http://css-tricks.com/examples/Sitemap
  13. 13 http://css-tricks.com/examples/Sitemap.zip
  14. 14 http://www.smashingmagazine.com/before-sending-an-email-please-note/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  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

↑ Back to top