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