How to implement a Radial/Pie Menu in CSS3?

I would like to implement a radial menu using CSS3 transforms animations similar to the third demo in this page. There is an implementation in jQuery using canvas Radmenu but it doesn't move as fluidly as the flash one.

First question would be: is this feasible? if possible using only 2D transforms and animations so it works in more platforms.

Second question: Where to do i开发者_StackOverflow中文版t? the simple CSS3 examples show how to translate, shear, scale and rotate simple objects. But I have no idea where to start looking for info on how to implement a menu like the flash one.

I would have simply replied to rsilva's comment, but unfortunately I don't have enough rep, so apologies for that.

Please feel free to borrow/steal from http://wewillbeok.com/radial, but be warned that it's definitely not the cleanest of code and isn't documented in the slightest bit. And Yi Jiang is quite right that the animations I use perform poorly on older browsers. Removing the "zoom" animation improves performance substantially.

Another well-documented and well-performing implementation is available here: http://www.webtoolkit.info/javascript-pie-menu.html, though it maybe isn't quite as "fancy."

So to more directly answer your question, I think you would be hard pressed to create such a menu using purely CSS3 animations, if that is what you're looking for, but it's absolutely feasible with a combination of JS and CSS3. The ideal implementation most likely lies somewhere between all of the examples mentioned so far.

have a look here

this turns a select into a pie menu, styleable via css, not as fancy as the above.

usage: $("#your-selectbox-id").pieselmenu($(this));

For the most part, there has to be some Javascript layer as you need to calculate the distribution of items. CSS3 can be utilized to aid the scaling and rotation on the elements by performing transforms. They work on Chrome, Safari, IE9+, FireFox 3.5+ and Opera 11+.

I created a plugin a while back, the jQuery Radmenu (Radial menu) plugin. I'm working on a good demo of its use (i'm not a designer and its taking me some time), but to get an idea of the power of the plugin you can check out http://www.tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4 for some examples.

The API spec is there and available for download. Feel free to fork it off GitHub too if you're looking to learn. https://github.com/nirvanatikku/jQuery-Radmenu-Plugin

Feel free to ping me if you have any questions