Tuesday, July 14th, 2009

Sitemaps 2.0 with SlickMap CSS

Category: Showcase

<p>Remember the era of the sitemap? Matt Everson has rev’d it up again with SlickMap CSS a nice visualization that runs on top of a simple set of ul lists.

To check out the magic, just peak in the CSS and see fun uses of new CSS:

  1. -moz-border-radius: 5px;
  2.     -webkit-border-radius: 5px;
  3.     -webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px;
  4.     -moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px; /* FF 3.5+ */

Related Content:

Posted by Dion Almaer at 6:28 am
12 Comments

+++--
3.9 rating from 39 votes

12 Comments »

Comments feed TrackBack URI

Nice work. I’m going to use this in a project I’m working on.

Comment by WillPeavy — July 14, 2009

The demo looks pretty bad in IE – not surprising since the CSS uses a lot of Firefox and Safari extensions.

I’m surprised that more people don’t complain about this kind of thing. One of the reasons everyone hates Microsoft is because they add their own custom extensions to things (the browser, Java, etc) which then lock people into their platform. But when people make extensive use of Safari/Firefox extensions nobody seems to find it as offensive.

Don’t get me wrong – I hate IE and get a little bit of satisfaction with the fact that a lot of sites now look uglier in IE than in other browsers. But I’m just surprised that I keep seeing so many articles about Safari-specific CSS transforms and other browser-specific things which we shouldn’t really be using.

Comment by jmccabe — July 14, 2009

@jmccabe: +1. People might as well [somehow] use ActiveX to render their rounded corners. They’d probably end up supporting a similar if not higher percentage of their users.

Comment by Darkimmortal — July 14, 2009

Looks nice on FF3.5, but on IE7 it doesn’t even show the links, just the name of the pages.

Comment by nanodocumet — July 14, 2009

@jmccabe – I agree I don’t like user agent specific junk either. For a production app, I would never use this sitemap. For internal use for apps in dev, it’s great though.

It took me about 2 minutes to tweak the CSS so it works okay in IE 7 and 8. It doesn’t have the rounded corners and shadows in IE, but I don’t really care about rounded corners or shadows – I just like to have a UL layed out nicely as sitemap for internal dev.

Comment by WillPeavy — July 14, 2009

Thanks for the mention, Dion. Much appreciated!

I made this thing primarily to avoid drawing sitemaps in Graffle, Illustrator, etc. and go straight to coding navigation. That was my whole motivation. So to avoid extensive HTML markup (which would make the whole thing pointless, IMO), I necessarily employed CSS2 pseudo-elements (:first-child, :last-child, :before).

It’s not hard to make this thing look the same in IE, it’s just a pointless venture.

Comment by astuteo — July 14, 2009

Good work! I think the Web is underestimating the sitemaps at all! Strange for me but even now I start projects where the sitemat isn’t present!

Thanks!

Comment by stoimen — July 15, 2009

Looks pretty awesome in Opera as well.

And I love how clean the CSS is

Comment by hdragomir — July 15, 2009

I gotta agree with jmccabe. Looks cool, love that it’s all in CSS, but if it doesn’t work on all browsers it may as well not exist.

Comment by otatop — July 15, 2009

I disagree; this is pretty awesome. Currently the sitemaps on my web pages are just simple, nested ULs. By throwing this CSS into my non-ie stylesheet awesome browsers can get an awesome sitemap page. IE will get, well, what it has always gotten. I agree that it could at least be a little more compatible in IE8, sans-rounded corners (there’s always javascript for that if necessary though…)

Comment by MikeyMcCorry — July 15, 2009

I added the following so I could put comments “alt” and divs with more descriptions.

a:link:after,
a:visited:after {
content: attr(alt);
display: block;
font-size: 9px;
margin-top: 5px;
font-weight: normal;
text-align: left;
margin-left: 5px;
margin-right: 5px;
}
a+div{
margin-right: 20px;
margin-top: 5px;
background: #fff;
padding: 3px;
font-size: 10px;
}

Comment by tarwin — July 15, 2009

Leave a comment

You must be logged in to post a comment.