Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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

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 Demo117 | Download Files128

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

example10

View Demo117 | Download Files128

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 know. 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://css-tricks.com/examples/Sitemap
  11. 11 http://css-tricks.com/examples/Sitemap
  12. 12 http://css-tricks.com/examples/Sitemap.zip
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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

    Chris Wallace

    January 22, 2009 4:59 pm

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

    0
  5. 5

    this is really nice. chris is amazing!

    0
  6. 6

    Klaye Morrison

    January 22, 2009 5:20 pm

    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

    Spank McMonkey

    January 22, 2009 7:41 pm

    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

    Steve Stedman

    January 23, 2009 6:39 am

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

    0
  19. 19

    Nice tutorial, really Chris is amazing !
    Thanks Smashing Magazine

    0
  20. 20

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

    0

↑ Back to top