posted on:September 3, 2007

Sitemap Styler Style your Sitemaps with CSS and Javascript


I believe that it isn’t necessary to point out the benefits of having a sitemap somewhere on your site. Apart from making sure that all of your pages are linked and indexed, you are providing an overview of your site’s structure. That can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help.

What is it?

Sitemap Syler is a little CSS/JavaScript piece of code that can be easily applied to your sitemap list. It then takes care of it’s presentation. All you have to do is include couple lines of code. It doesn’t require any JavaScript knowledge but some CSS knowledge would come in handy if you want to modify the appearance of your sitemap.
I must point out that Sitemap Styler doesn’t generate sitemaps, it merely styles them.

How does it work?

In order to have SEO friendly sitemap, entire site structure should be rendered in html code. So, no fetching subcategories with AJAX or anything like that. The best way to render links and display hierarchy is using nested lists. Sitemap Styler uses unordered lists. The root list has an id = “sitemap”. Simple JavaScript function goes through list’s item nodes and check for child elements. If item contains nested list, script attaches a span element that serves as a toggle button for expanding and collapsing child lists.
Here’s a sample of what html code should look like:

<ul id="sitemap">

  <li><a href="#">First link</a>
  <ul>
    <li><a href="#">First link</a>

    <ul>
      <li><a href="#">First link</a></li>
      <li><a href="#">Second link</a></li>

      <li><a href="#">Third link</a></li>
      <li><a href="#">Fourth link</a></li>

      <li><a href="#">Fifth link</a></li>
    </ul>
    </li>

  </ul>
  </li>
</ul>

In our examples the list goes down to level 3, but it can go on forever. It is just a matter of styling.

How to apply it to your own site?

Easy. You have to download and extract one of the examples. Put the folder named “sitemapstyler” into the root of your site. On sitemap page (page that already contains your sitemap, rendered as unordered list) place this code inside the head tag.


<link href="sitemapstyler/sitemapstyler.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="sitemapstyler/sitemapstyler.js"></script>

Don’t forget to put id=”sitemap” to your top unordered list element.

Examples

Why don’t you join in?

Here’s a chance for all you css designers out there to be creative. Create your own “theme” for Sitemap Styler. Send your files to me and I will add it to the gallery. Your name will be listed (along with a link to your website) on this page as well as in the footer of your theme’s index page.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (62 Comments)

  1. 3kolone
    September 3, 2007

    example 2 is pretty nice ...
  2. Derek A
    September 3, 2007

    The point of a sitemap is to see the the hierarchy/information architecture in a single glance. With these examples you've hidden the very information that makes the sitemap useful!
  3. cssglobe
    September 3, 2007

    You have a point there Derek. You can always leave the list open, but if you want to hide it's parts, use the script. Also there are number of ways that you can use this script.
  4. Dean
    September 3, 2007

    I agree with Derek. Site maps should be instantly visible. Maybe rename this as a menu or something else! Its cool code...
  5. cssglobe
    September 3, 2007

    to tell you the truth, this started as something else.. it was similar to sitemap but it has a purpose of a menu... more like a widget of some sort... Anyway the code is here, so... :)
  6. David Hopkins
    September 3, 2007

    I'm with 3kolone, 2 is the nicest. So long as you tell people they need to click to see the nested categories I don't see a problem with it.This would be pretty good to use in conjunction the <a href="http://dev.mysql.com/tech-resources/articles/hierarchical-data.html">nested set model</a>.
  7. Karl
    September 4, 2007

    Nice styling, but in this day and age of progressive enhancement I expect to see the lists fully expanded when JavaScript is unavailable rather than a message saying that I need to enable JS to access information that's already in the source code.
  8. Save Videos
    September 4, 2007

    Nice, but I can't imagine a large site using that especially when they could have hundreds or even thousands of pages.
  9. Ross Bruniges
    September 4, 2007

    Site maps are a very important thing to include on any site for the means of accessibility and also SEO - they provide a lot of information at a glance. Nice examples but I would expect to also be able to click on the links themselves to expand the lists below. Clicking the 'cross' is rather fiddly.
  10. cssglobe
    September 4, 2007

    Good point Karl, and the rest of you folks. What I wanted is to present this simple script. Sitemap was the closest thing that I could relate this script to.
  11. Tim
    October 9, 2007

    This seems accessible and SEO friendly to me. The SE's can still read the content because it's not dynamically inserted, just moved onto the page when you drop down. In terms of accessibility, just disable the Javascript or maybe add some Access Keys to drop down the list. Personally, I think Site Maps can be a bit overwhelming, and this would work great to get you exactly where you want to go. That is, if the site architecture is good :)
  12. Tate
    October 10, 2007

    I think this is a great initiative for human-readable sitemaps. However, it really ought to have utilise a no-javascript fallback, such as expanding the navigation when javascript is disabled. Secondly, this doesn't conform at all to the sitemap protocol. http://www.sitemaps.org/. It's just plain XML.
  13. Scott
    October 31, 2007

    Great code, so much cleaner than others that I've seen on the web. I did make a couple of enhancements after seeing what others thought were limitations. First of all, to make the list expanded automatically if javascript is turned off, I added a <noscript> section to display the list: <noscript> <style type="text/css"> #sitemap ul{display:block;} </style> </noscript> Secondly, I added an expand all/collapse all to allow users to quickly see the site hierarchy. I did this by naming the function openMap() and closeMap() and calling each from a link in the page. I changed the function in openMap() to set the <ul> display to 'block': ul.style.display = "block"; and the className for the span to 'expanded'; span.className = "expanded"; works great, take a look: http://education.ou.edu/sitemap/
  14. Scott
    October 31, 2007

    Sorry, it'd be nice to allow users to view the post before submitting so we'd know if code is getting stripped. Anyway, continuing with my prior post, I added a noscript section that sets the #sitemap ul display to block. This ensures that the list is expanded if javascript is disabled.
  15. Jan
    November 3, 2007

    As Tate said above, XML sitemap is sufficient. Only a few visitors use HTML sitemaps for the navigation purposes. Instead, XML sitemaps can be crawled by search engines without being hidden. Just put a small link at the bottom of each page saying "XML sitemap". I personally use so-called HTML sitemap, but it is just a list of the most important pages on my site. Otherwise it would list approximately 1500 pages for each language... Not useful for ordinary visitors at all.
  16. presse
    January 8, 2008

    Example 2 is very nice... Personally, I think Site Maps can be a bit overwhelming, and this would work great to get you exactly where you want to go.
  17. webkatalog
    January 8, 2008

    I like both Example 2 and Example 3 - unfortunately leaves me between the two not decide why I invite them both down to me ;)
  18. yoichi
    January 15, 2008

    Hi, I've installed this on my sidebar for categories and it's working perfectly ok in FF but for some reason the "+" and "-" do not appear in IE6 (i.e. can not open the sub-categories). I wonder what I may have done wrong. Your guidance will be much appreciated. Thanks
  19. yoichi
    January 15, 2008

    Please disregard my previous comment. I found out that it was conflicting with "Secure and Accessible PHP Contact Form" plugin.
  20. root
    January 24, 2008

    Example nr 1 is pretty good I was searching something like that for my site, now I found it :D Thx a lot for this article Keep blogging (I like good CSS/HTML articles ;) ) Cya
  21. anarsizm
    February 6, 2008

    Personally, I think Site Maps can be a bit overwhelming, and this would work great to get you exactly where you want to go. That is, if the site architecture is good :)
  22. forum
    February 9, 2008

    Looks very interesting. Also there are number of ways that you can use this script.
  23. edebiyat
    February 12, 2008

    Looks interesting. Nice styling, but in this day and age of progressive enhancement I expect to see the lists fully expanded when JavaScript is unavailable rather than a message saying that I need to enable JS to access information that's already in the source code.
  24. Oyun indir
    February 14, 2008

    Thank you for your work.
  25. Alex
    February 18, 2008

    CSS Sitemap Styler: Style your Sitemaps with CSS and JavascriptSitemaps can be very useful to some user trying to find his way around. But, what happens if you have huge sitemap and you don’t want to overload your page yet still keep things accessible and “indexable”? Maybe CSSG Sitemap Styler could help. Another solution: CSS SiteMap.
  26. msn ifadeleri
    February 18, 2008

    Thanks, example 2 is pretty nice.
  27. Oyun
    February 20, 2008

    Personally, I think Site Maps can be a bit overwhelming, and this would work great to get you exactly where you want to go. That is, if the site architecture is good :)
  28. 777smileys
    February 25, 2008

    Great display of standards based html! One little thing: The examples quirk a little on Opera 9, I got to mend it a little by specifying a 61.25% font-size for the body and 1em line-height for the ul’s. It’s not perfect (my shot is that the em sized borders are to blame) but close to it! BTW I haven’t tested to see the changes on the ie side, I suppose it just takes some tweaking. Just being a little picky. It’s a fantastic job!
  29. orgu
    March 28, 2008

    Thank you for your work. I liked it. Cool...
  30. Elaine
    April 8, 2008

    Hi, How would you go about using the sitemap as a navigation system where the drop down stayed open even after clicking on one of the sub-links? Thanks, Elaine
  31. neuwagen
    May 17, 2008

    Nice sitemaps, thanks for your shared work! cool stuff...
  32. yogaurlaub
    May 17, 2008

    Site maps one and two are realy cool, good work! thanx a lot.
  33. chary
    May 22, 2008

    its very nice article and add more articles like it
  34. bayrak
    May 24, 2008

    thank you so much
  35. www.fettverbrennung.org
    May 25, 2008

    Nice, but I can't imagine a large site using that especially when they could have hundreds or even thousands of pages.
  36. Büromöbel
    May 30, 2008

    very good article with many usefull informations, but i think the most people need first informations about WHAT a rss feed is :))
  37. euwagen
    June 5, 2008

    Thank you for sharing these stylish sitemaps!
  38. bayrak satiÅŸi
    June 11, 2008

    thank you so much looks interesting. happy sharing
  39. Richard Metcalfe
    June 22, 2008

    Very modern style very hard to have style and quality in one these days but i think you have nipped it in the bud with this.
  40. voyance gratuite
    June 23, 2008

    Personally, I think Site Maps can be a bit overwhelming, and this would work great to get you exactly where you want to go.
  41. key sorgulama
    June 27, 2008

    Thank you so much looks interesting. Happy sharing.
  42. Sean, Web Designer
    July 1, 2008

    Nice share Alen, love sitemap 2 especially useful for large web sites however maybe overkill on smaller sites. Ran it through seo-browser.com and it passes the seo readability test v.nice!
  43. Firebubble Design
    July 25, 2008

    Thanks for sharing, all the examples look really good. However I would just keep the sitemap page as simple as possible as in my opinion it mainly serves the search engines more than visitors.
  44. nick, search engine optimiser
    July 25, 2008

    nice post, javascript not the most search engine friendly of code, smooth tho and ultimately looks great.
  45. Elgendi
    August 14, 2008

    great work! @Scott expand/collapse (http://education.ou.edu/sitemap/) is a bit buggy in IE. Try: Expand all then collapse all then expand "Alumni.." you'll see wonders! any help in expand/collapse all will be appreciated!
  46. Farm frenzy 2
    August 19, 2008

    Very good article. Thanks for some sound advice. It's a topic that all creative industries need to know a lot about.
  47. Oak Garden
    August 19, 2008

    You can get a sweet little copyright plugin that keeps you sitemap and copyright footer up to date. If i could find the link i would have put it here! lol
  48. Lohberger
    August 20, 2008

    Nice display of standards based xhtml. Thank you for your work.
  49. Heidi
    August 21, 2008

    I think this is a great initiative for human-readable sitemaps. However, it really ought to have utilise a no-javascript fallback, such as expanding the navigation when javascript is disabled.
  50. Modelagentur Graz
    August 27, 2008

    I was looking for a sitemap for a clients website that could handle an ever increasing number of news articles. This was perfect. Cheers, works great!!
  51. Studio Créatif
    August 27, 2008

    Really readable sitemap. Good job
  52. Bob
    November 3, 2008

    Does this conform to sitemap protocol?
  53. Bob
    November 4, 2008

    I'm sorry stupid question here. I get my sitemap generated by Google. If I were to use this app do I have to code the HTML?
  54. earth4energy
    November 27, 2008

    I get all my sitemaps done by Google. Is it necessary to make sitemaps pretty - > thought that was just for google to see
  55. feha
    January 10, 2009

    I really like this. I wish if JS is disabled to show expanded tree. This is very nice if used for Table of Contents in page sections. regards feha
  56. Alicia
    February 12, 2009

    Okay, I'm kinda new to this whole thing, so this might be kind of a silly question... I created my sitemap using google, but my css won't allow it to display. It says, "Cannot view XML input using style sheet." If I add a css like the examples you listed to the sitemap page itself could it help solve that issue? In other words, how do I create a page (sitemap) on my website for which the overall website css does not apply?
  57. nomen
    February 16, 2009

    I really like this. Great work! I have a big site tree and I would like to open, by default, just the first 2 or 3 levels. How can i do this? Thanks for your help.
  58. Roxbourne
    February 19, 2009

    Thanks for this, I ended up using it on my website. I edited the code to make it load open by default. Is there anyway to keep it open even if the user viewing it doesnt have javascript on?
  59. Brandon
    April 1, 2009

    Is there an update for sitemap styler that works with IE8? My words are all bunched together in IE8. I'm going to now apply the fix that displays this page in IE7, but ideally, I would like to see an update.
  60. Fussmatten
    June 1, 2009

    Is it realy neccessary to style a sitemap? A sitemap contains maybe 20.000 single sites how will you style that ?
  61. bayrak
    June 16, 2009

    thanks
  62. bayrak
    June 16, 2009

    thank you very much

Sorry, the comment form is closed at this time.