[destos]

So Ive been working on this for the past two days on an off. Its essentially a knock off of the navigation items that appear in different OS X applications and the Finder. But in clean html and css!

Take a gander! You can download the source code and psd in the example.

patrick.forringer.com/lab/applmenu/ (if someone with more posts could re-post the link below that would be helpful, thanks )

I used a few CSS3 selectors so some of the styling doesn't work in Opera and IE7. Forget about anything below IE7 displaying properly, it just wont work.

By using sprites for the graphics and icons I was able to shove them all onto one image. Which was a fun challenge to work out.

So if any of you want to take a look and give me feed back its much appreciated. Also feel free to reuse this in any way you see fit, just be mindful of the CC license.

Oh and Hi! ( This is my first major post on this wonderfull board )

[bjzaba]

haha - this is cool.

[brooks]

That's actually quite nice, well done squire.

I'm sure that there are ways to shorten the CSS down, but it works, it doesn't quite validate but there's always room to hone it down. Nicely done.

[Do Gooder]

welcome

Apple Finder menu

[pgo]

Looks pretty nice. Besides not working in IE at all (you might consider writing a script that will mimick the selectors you're using and apply classes as needed), my only complaint is that text resizing is somewhat awkward.

On that same note, if you resize text on your main site, your little "view site" arrows will show both states. The way I avoid that is usually to place an empty space of transparent pixels - say, 100 - between the two sprite states. This doesn't increase file size much and avoids showing more than one sprite state at a time.

[destos]

Pat-
It wasn't in my spec to get it working in IE6, in IE7 most of it works except for the :last-child pseudo-selector. Which can be easily fixed as you said with some JavaScript.

As for resizing, I didn't worry myself with creating gaps in the sprites since the browsers I tested ( Safari and Firefox 3( with zooming disabled) ) didn't expand the actual icon buttons, thus not exposing the alternate states.

I guess what I'm saying is my uses for this project didn't warrant creating compatibility with aging or non compliant browsers.

-brooks.
The CSS seemed quite minimal to me, what bloated it was adding all the selectors for the button states on the first button, middle buttons, end buttons, and single buttons. Then checking whether a button is inactive ect.

But if you have suggestions on how to slim it down I would greatly appreciate it.

Thanks again for all the feedback guys.

[hawken]

this hammer gets all the nails in except for that nail with the funny shape, it appears to be sticking out the most, must be my hammer, I'll just forget about it and see what happens.