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;

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.


As this is only an experimental menu, I'll note down why I don't think it's production-ready;

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.