Apple iTunes-Like CSS Menu

By: Chris Coyier on September 10th, 2007 — Posted in: Freebie

Developer Mark Alldritt posted a pretty nice bit of code (XCode project) for making nice Apple-Like menus in applications. I thought I would try to replicate this same idea with CSS. It worked out fairly well, check out the screenshot:

The CSS just makes use of a couple of nested unordered lists. The nested list uses a li:hover psuedo class, but I image the same could be done with anchor elements set to display:block; to make it a bit more all-browser-friendly. Feel free to download the example and do with it what you will.

[LIVE EXAMPLE]

[DOWNLOAD EXAMPLE]

Theoretically Related Articles:

Responses

1

i wanted to submit this awesome article.

Comment by rony john — September 10, 2007 @ 6:02 pm
2

Wow! A few days ago, I saw an unordered list-menu which switched only the body-tag-id to display different submenus. Combined with this, you might be able to replicate even more this menu-style, i.e. the triangle position etc.! Perhaps I’ll try it sometime

Comment by Jayzon — October 2, 2007 @ 3:01 pm
3

@Jayzon: I toyed with that body-tag-id thing a big here.

I think it’s a solid idea worth using whenever possible.

Comment by Chris Coyier — October 2, 2007 @ 4:22 pm

Thank you for visiting CSS-Tricks! I'm glad you found an article useful enough to print out! Remember to visit css-tricks.com often for more fresh content.