SlickMap CSS is stylesheet package that makes building sitemaps a snap. It creates sitemaps from HTML unordered lists (i.e. <ul> tags). It has a very small footprint — 6KiB of CSS file and 5KiB of images. The resulting sitemap has tree-view layout and has a nice gradient effect on each link.
To create a sitemap, your HTML should look like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Site Map</title>
<link rel='stylesheet' href='slickmap.css'></link>
</head>
<body>
<div class='sitemap'>
 <h1>My SiteMap</h1>
 <h2>Find stuff here</h2>
 
 <ul class='col4' id='primaryNav'> <!-- the class should be col# where # is the number of columns you want in the sitemap -->
  <li id='home'><a href='http://ad1987.blogspot.com/'>Home</a></li> <!-- you must put id='home' for this li element -->
  <li><a href='/about'>About</a>
   <ul> <!-- this ul element is nested -->
    <li><a href='/about/abhisek'>Abhisek</a></li>
    <li><a href='/about/abhitech'>AbhiTech</a></li>    
   </ul>
  </li>
  <li><a href='/blog'>Blog</a></li>
  <li><a href='/contact'>Contact</a></li>
 </ul>
</div>
</body>
</html>
[Do follow the above code closely; important sections are commented.]

Remember SlickMap CSS doesn't work on Internet Explorer. So you may have to find workarounds for making it work in IE. However, it works like a charm in Firefox, Safari, Opera. It also uses CSS3 features which means it won't work in earlier versions.

Tags: CSS, sitemap

Labels:

blog comments powered by Disqus