A Circular menu divided into four sections
For IE9+, Firefox, Opera, Safari and Chrome
5th June 2012
copyright © stu nicholls - CSS play
Using CSS3 to prodcue a circular menu divided into quadrants.
This uses just a simple unordered list with graphic links and works in all modern browsers.
There is , however, a bug in Safari, Chrome and Opera in that when a parent element uses border-radius with overflow hidden then although the background is cropped to the border-radius any child element does not get its :hover area cropped.
In this menu the links are still selectable from outside the outer circle. Surprisingly enough IE9 gets it right although it does not support the radial-gradient style.
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.