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)

Footnotes

  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

    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
  2. 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
  3. 103

    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
  4. 154

    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
  5. 205

    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
  6. 256

    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
  7. 307

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

    0
  8. 358

    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
  9. 409

    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
  10. 460

    Great sitemap, gonna use it sometime, thanks.

    0
  11. 511

    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
  12. 562

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

    0
  13. 613

    you are a loser

    0
  14. 664

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

    0
  15. 715

    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
  16. 766

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

    0
  17. 817

    You are wrong

    0
  18. 868

↑ Back to top