While cleaning out some files on my hard drive this evening, I came across a discarded navigation bar for the version 7.0 redesign of this site that I had nearly forgotten about altogether. It was one of the first gee-whiz improvements that I pulled off in prototyping the redesign — I should say “nearly pulled off,” actually. Ultimately, I tossed it out entirely from my plans for the site, considering it too cumbersome to update (it requires no fewer than six separate images to be manually generated each time the cover image is changed) and woefully inadequate in terms of manipulating CSS to conform to my intentions.
Below: Nav and nav not. Photoshop comps for a navigation idea that almost made it into the real world. Click the image to see it in action.
Specifically, the text that appears on roll-over doesn’t align to the bottom of the column that results, as it does in the Photoshop comp below. The result is a clear violation of Fitt’s Law, creating a metrically short but usably huge gap between the initial roll-over target and the actual link. You’ll see what I mean if you click on the image below to see the navigation in action. And if you view it in OmniWeb and perhaps some other niche browsers, you’ll see some further glaring glitches, like disappearing links on roll-over. And it doesn’t work at all in my mostest favorite browser of all time, Internet Explorer. Yeah, it’s all pretty ugly.
It was an idea that would have worked beautifully in Flash, but ultimately I wanted the site to be a purely XHTML/CSS endeavor. It’s also something that could benefit mightily from the Ajax approach recently christened by Jesse James Garrett, as it effectively tries to emulate the action of fetching information from the server, at least in the Cover Images menu items. Heck, if I could have transparently been fetching data from the server, I would have built a navigation ten times as cool as this. Alas, I’m not so technically endowed.
+
I think that, aside from the secondary links not aliging to the bottom of the nav, it’s a very attractive navigation. A bit of work would get it working in a winde variety of browsers too.
My only crisitism is the same one that I always level against these sort of multilevel navigation schemes. You can’t see those options until you mouse over the parent element. So to find what you are looking for you need to mouse about.
Something like this is best used in we applications, where users over time come to reconize where to find certain options and they can cut down on use of screen real estate.
Hmm, maybe you could try this instead of a new image each time:
Make a rollover image that is 2px square, with a white pixel in the upper left corner and the bottom right corner, with the other two pixels being left transparent. Then, use that as the rollover image that loads on top of the train image. I’ve used this technique before and it looks kinda cool.
Or, you could bite the bullet and make the semi-transparent rollovers PNG images, doing the alpha-transparency loader thingie for IE users. It’d work, but it might be kinda complicated.
Looks good, but it doesn’t fly in IE6. Firefox handles it well though.
For something like this you could try the CSS Image Sprites method so that you would only have to update one image instead of six each time. 🙂
This has given me (and i’m sure others) some great ideas. Thanks for sharing!
Quick question, semi off-topic (but still about your site). Is there a reason that the “Creative Commons License” link at the bottom of every page doesn’t go anywhere? Which license are you using?