2 ms·
The radial menu in the stackoverflow article has some really elegant and concentrated CSS code, and I learned a lot by looking at it. I didn't realize you could
by SimHacker 13y ago
The radial menu in the stackoverflow article has some really elegant and concentrated CSS code, and I learned a lot by looking at it. I didn't realize you could do that kind of stuff!
The tradeoff of using pure CSS and very little JavaScript is that it's not a flexible, reusable, data driven component, that lets you plug in your own graphics, content and behavior.
I think it's a great idea to offload as much of the graphics and feedback to CSS as possible, but I don't see any practical reason for avoiding JavaScript and using pure CSS.
Anyway, as a rule of thumb, people who use modern browsers with JavaScript turned off do it because they like to whine about how persecuted they are, and I would never presume to begrudge them that opportunity.
The nature of user interface design is that when the rubber hits the road, there will always be millions of specific little tweaks you have to do to make things easier for the user and integrate with the application, and you can only do so much in CSS before you hit a wall and have to use JavaScript.
Of course it's great for the JavaScript code to leverage CSS as much as possible to make the menus graphically rich and easily customizable, and many of the CSS techniques of this particular example with a fixed menu could be applied to a more general purpose JavaScript widget.
But what it boils down to is that you really need the power and generality of JavaScript to support more sophisticated tracking, feedback, data driven menus with dynamic layout, application specific presentation and tracking feedback, etc.
Then you can get on to the harder problem like making it easy to design, build and measure pie menus that are most efficient and easy for users to remember, learn and use. And that depends a lot on the environment and the tools that you are using.
For example, these pie menus for Unity3D leverage the Unity editor and 3D object manipulation tools, and they have ways to tightly integrate your own application, content, graphics, animation and feedback:
http://www.youtube.com/watch?v=sMN1LQ7qx9g http://www.youtube.com/watch?v=sMN1LQ7qx9g