A Circular Ring Menu
For Firefox and IE9+ (highlighting a bug in Safari, Chrome and Opera)
5th June 2012
#1#2#3#4#5#6#7#8#9
copyright © stu nicholls - CSS play
Information
Using CSS3 to produce a ring of links with a central indicator
This uses just a simple unordered list with graphic links that works correctly in Firefox and IE9+ although IE9 will not style the radial gradient.
There is, however, a bug in Safari, Chrome and Opera in that when a parent element uses border-radius with overflow hidden then child elements with position:absolute will extend past the border-radius and not be cropped.
This bug has been around for quite some time, so we must wait for this to be fixed before using this menu styling. Let's see how long this will take to fix.
Copyright
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.
