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.
3kolone 3 Sep, 2007
Derek A 3 Sep, 2007
With these examples you've hidden the very information that makes the sitemap useful!
cssglobe 3 Sep, 2007
Dean 3 Sep, 2007
cssglobe 3 Sep, 2007
David Hopkins 3 Sep, 2007
Karl 4 Sep, 2007
Save Videos 4 Sep, 2007
Ross Bruniges 4 Sep, 2007
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.
cssglobe 4 Sep, 2007
Tim 9 Oct, 2007
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 :)
Tate 10 Oct, 2007
Secondly, this doesn't conform at all to the sitemap protocol. http://www.sitemaps.org/. It's just plain XML.
Scott 31 Oct, 2007
<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/
Scott 31 Oct, 2007
Jan 3 Nov, 2007
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.
presse 8 Jan, 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.
webkatalog 8 Jan, 2008
yoichi 15 Jan, 2008
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
yoichi 15 Jan, 2008
I found out that it was conflicting with "Secure and Accessible PHP Contact Form" plugin.
root 24 Jan, 2008
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
anarsizm 6 Feb, 2008
forum 9 Feb, 2008
edebiyat 12 Feb, 2008
Oyun indir 14 Feb, 2008
Alex 18 Feb, 2008
msn ifadeleri 18 Feb, 2008
Oyun 20 Feb, 2008
777smileys 25 Feb, 2008
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!
orgu 28 Mar, 2008
Elaine 8 Apr, 2008
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
neuwagen 17 May, 2008
yogaurlaub 17 May, 2008
chary 22 May, 2008
bayrak 24 May, 2008
www.fettverbrennung.org 25 May, 2008
Büromöbel 30 May, 2008
euwagen 5 Jun, 2008
bayrak satişi 11 Jun, 2008
Richard Metcalfe 22 Jun, 2008
voyance gratuite 23 Jun, 2008
key sorgulama 27 Jun, 2008
Sean, Web Designer 1 Jul, 2008
Firebubble Design 25 Jul, 2008
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.
nick, search engine optimiser 25 Jul, 2008
Elgendi 14 Aug, 2008
any help in expand/collapse all will be appreciated!
Farm frenzy 2 19 Aug, 2008
Oak Garden 19 Aug, 2008
Lohberger 20 Aug, 2008
Thank you for your work.
Heidi 21 Aug, 2008
Modelagentur Graz 27 Aug, 2008
Cheers, works great!!
Studio Créatif 27 Aug, 2008
Bob 3 Nov, 2008
Bob 4 Nov, 2008
I get my sitemap generated by Google. If I were to use this app do I have to code the HTML?
earth4energy 27 Nov, 2008
feha 10 Jan, 2009
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
Alicia 12 Feb, 2009
nomen 16 Feb, 2009
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.
Roxbourne 19 Feb, 2009
Is there anyway to keep it open even if the user viewing it doesnt have javascript on?
Brandon 1 Apr, 2009
Fussmatten 1 Jun, 2009
A sitemap contains maybe 20.000 single sites how will you style that ?
bayrak 16 Jun, 2009
bayrak 16 Jun, 2009