Tuesday, July 14th, 2009
Sitemaps 2.0 with SlickMap CSS
Category: Showcase
ul lists.
To check out the magic, just peak in the CSS and see fun uses of new CSS:
CSS:
-
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
-webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px;
-
-moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px; /* FF 3.5+ */
-
Related Content:
4.1 rating from 34 votes
Nice work. I’m going to use this in a project I’m working on.
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.
@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.
Looks nice on FF3.5, but on IE7 it doesn’t even show the links, just the name of the pages.
@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.
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.
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!
Looks pretty awesome in Opera as well.
And I love how clean the CSS is
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.
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…)
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;
}