Circular Segment Pie Chart Menu
An experimental round menu with decreasing concentric circles (non-IE browsers).
Works in modern browsers but fails miserably in IE;
- IE8: There's no hope for IE8 because CSS property "border-radius" isn't supported (no pretty circles).
- IE9/10: Visually looks promising, but goes screwy when cells are hovered. This is further exasperated by the lack of support for CSS property "pointer-events".
- IE11: Looks wonderful, and in theory *should* work well too ("pointer-events" fully supported), except it doesn't. Hovered cells flicker, random cells vanish.
To try and force some predictability, all versions of IE get CSS for a grid-like fall-back.
Also, note that although the circular menu and IE grid menu are both fully fluid (responsive), I haven't provided an alternative mobile layout, which should probably revert to a vertically stacked list on small screens. Take your cues from the source of the original (image-based) faculty web demo if you want to go that route.
Please view the source of this page to see the HTML markup and CSS.
Issues
As this is only an experimental menu, I'll note down why I don't think it's production-ready;
- The menu markup structure isn't a clear hierarchy - each concentric ring is built from an un-nested list, rather than nested lists, so may pose a problem to those who use screen readers (i.e. people who can't see the visual hierarchy).
- The menu segments go out of kilter on tab-focus, so this doesn't work well for those who use a keyboard to navigate.
More demos and snippets
Did you find this useful? There are more demos and code snippets this way.