Now, this is a nifty piece of CSS which helps you build a sitemap straight from HTML unordered list navigation.
This can be customized (see the slickmap.css file) to adapt to your needs and it allows up to three levels of page navigation. Web designers, especially, would love it.
“The idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.” says Matt.
It was tested with Safari, Firefox, Opera, and other standards-compliant browsers (well, because IE seems not to be so standards compliant this piece of CSS might look crappy there).
Features and Benefits
* Eliminates the need for additional software
* Easily revised with clients on-the-fly
* Clickable anchors with visible URLs
* Design process results in working HTML code
How do you use it?
Pretty simple by following the steps below (found also in the README.txt file):
1) Create an HTML file with an unordered list of links. SlickMap was
designed to style actual linked navigation, not simply lists, so make
sure to include anchor tags. See index.html for the correct formatting.
2) Apply slickmap.css as you would any other stylesheet, using it for both
“screen” and “print” media as seen here:
<link rel=”stylesheet” type=”text/css” media=”screen,print” href=”slickmap.css” />
3) Within your HTML file, the link to your home page should be at the top
of the unordered list and have the id of #home. This is required to pull
the home page link out above the rest of the site tree.
4) The SlickMap default is 4 columns. In order to change the number of
columns, you simply need to change the class of the PrimaryNav unordered
list (col4, col5, etc.) SlickMap CSS will accomodate 1 to 10 columns,
some much better than others.
NOTE: Due to Internet Explorer’s difficulty in rounding numbers, you may
find the farthest right column drops down instead of appearing in line.
If need be, you can resolve this issue by adjusting the CSS to use a
slightly smaller percentage than what you really need, i.e. (pun intended)
24.9% instead of 25%.
5) Depending on how you use these files, you may need to correct the image
paths within the CSS file.