MyTestBox.com :: web software reviews, news, tips and tricks

SlickMap CSS – a way of displaying a neat sitemap directly from HTML unordered list navigation

Jul 14, 2009 by Mircea GoiacloseAuthor: Mircea Goia Name: Mircea Goia
Email: mtb@mytestbox.com
Site: http://www.mytestbox.com
About: Mircea Goia was born in Romania and imigrated to USA in 2005. He lives in Phoenix, AZ and works as web developer. Aside, he works also on several entrepreneurial Web projects. He shows a keen interest in commercial Web development such as social networks, viral marketing, online video. His artistic hobby is filmmaking with special interest in directing.See Authors Posts (76) Tips and Tricks

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.

Matt Everson of Astuteo, LLC created this and it’s free for download on his website: http://astuteo.com/slickmap/ (a demo can be found here)

“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.

Happy sitemapping!

Tags: browsers, css, html, list navigation, sitemap, slickmap, web design

(No Ratings Yet)

 Loading ...