a little bit of everything

For those who create and using website must be familiar with sitemap page. Usually sitemap gather all links in the site and display them structurally for ease of use. For me, sitemap is always the last to create because it’s a boring task and sometimes not even in user requirement. And when I actually get around to do it, I always use unordered list because it makes most sense but the result isn’t always pretty.

So here I am with free times in my hands, creating css3 based visual sitemap. I’m using css3 because to make tree structure in sitemap I have to use css3 pseudo-class selector. But again with new web technology, we have a problem with our beloved browser, ie, so I’ll use a little js hack for ie only. Here’s the result.

I try to use as few images as possible but one thing I hate most is javascript hack. But you don’t have to use the hack if you’re ok with slightly distort in ie. Now let’s look at the code.

Download the code here -> download usitemap

We’ll be using unordered list in HTML, it can be nested all you like.

<ul>
  <li>Home
    <ul>
      <li>Product
          <ul>
            <li>Computer</li>
            <li>Printer</li>
            <li>Scanner</li>
          </ul>
      </li>
      <li>Client</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </li>
</ul>

And in css we’ll use css3 and 4 images:

/*change color*/
#usitemap a, #usitemap a:visited{color:#4D6180;background: #B5C7E3;border: 1px solid #4D6180;}
#usitemap a:hover, #usitemap a:active{background: #90ABD5;}

/*sitemap core*/
#usitemap *{margin: 0;padding: 0;}
#usitemap ul li{list-style: none;position: relative;top: 0px;width: 120px;padding: 10px 40px 0 0;background-image: url(fork_mid.gif);background-position: top left;background-repeat: no-repeat;}
#usitemap ul li:last-child{ background-image: url(fork_last.gif); }
#usitemap ul li:first-child{ background-image: url(fork.gif); }
#usitemap ul li:only-child{ background-image: url(dotted.gif); background-repeat: repeat-x;}
#usitemap ul li ul li{left: 172px;top: 0px;font-size: .9em;}
#usitemap ul li ul{margin-top: -42px}
#usitemap ul li a{text-align: center;display: block;line-height: 28px;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: 0 0px 0 50px;width: 120px;text-decoration: none;}

Last but not least, javascript hack for ie using ie-css3 with jquery:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<!--[if (gte IE 5.5)&(lte IE 8)]>
<script type="text/javascript" src="ie-css3.js"></script>
<![endif]-->

that’s it, easy visual sitemap with css3 and html!

Download the code here -> download usitemap