views:

60

answers:

1

I wish to incorporate a circular navigation with hover effects on the individual items. Are there any tutorials out there?

If not, what would be the best way to make 6, 8, or 12 link "items" arranged circularly around a circular logo? They will have different states when hovered, active, or depressed? I want the items to have that "buttony" feel. I can use javascript to do this if there is anything suited towards it, but prefer using primarily CSS.

+1  A: 

There are a few ways to do this.

The most simple one is to make a regular menu and use position: absolute; on all the individual items to position them around the logo.

Another way to make more complicated circular menus is to use an image map. I once found a good tutorial that involved complex shapes and hover effects on an image map, but I lost it, sorry.

It was on a well known site, at least to me, and involved a graphic with colored blobs, of different shapes. Something like quirksmode.com... I don't know anymore, I'll tell you when I find it.

This will get you there mostly... http://www.google.nl/search?q=html+image+map+hover

Pepijn