Grow your CSS skills. Land your dream job.

Apple iTunes-Like CSS Menu

Published by Chris Coyier

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:

apple-like-menu.png

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]

Comments

  1. Permalink to comment#

    i wanted to submit this awesome article.

  2. Jayzon
    Permalink to comment#

    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 ;-)

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

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

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".