Path menu in pure CSS3
I'm fall in love with the new UI of Path. I really love the user interaction design like the "add menu". So, as I'm a front-end developer, I tried to recreate the same thing on my browser.
Firstly, I posted a video of the effect on dribbble and now, I share my code.
An experiment in CSS
I made the choice to do this with only html/css3 and no images whatsoever.
How was this made?
To calculate the coordinates of items and generate the animation, I used Sass+Compass.
I used a math formula in order to add the items's position on the arc of circle. So, you can add or remove items without rewrite the code.
Finally, I generate a keyframe animation for each item.
To be honnest, I had a lot of problems to use keyframes and Sass.
It's for this reason, that it's only compliant with Webkit.
You can fork the source on github !
Follow me on Twitter! And ask any questions you want or send comments.
Edit 07/27/12: I'm using Sass 3.2 now. It works for every browser supporting css3 animations.