Live data from Hacker News

Creating a Radial Menu in CSS

stackoverflow.com

51–60 of 80 posts

Re: Creating a Radial Menu in CSS

#51
post #33
post #7

Earlier quoted context omitted.

I'm not a webdev, but the code says: /* * rotate each slice at the right angle = (A/2)° + (k - (n+1)/2)*A° * where A is the angle of 1 slice (30° in this case) * k is the number of the slice (in {1,2,3,4,5} here) * and n is the number of slices (5 in this case) * formula works for odd number of slices (n odd) * for even number of slices (n even) the rotation angle is (k - n/2)*A° * * after rotating, skew on Y by 90°-…

...so SASS?

shouldn't this be calc()[0] work?

[0] https://developer.mozilla.org/en-US/docs/CSS/calc

Re: Creating a Radial Menu in CSS

#52
post #14

This is also known as a radial menu, and has some great properties that make it better (faster) than a normal context menu. You should be able to select an item from the menu in a single fast (distance insensitive) mouse gesture. Click down on the star, drag in the direction of an option, and release the mouse to select it. This way you can choose an option without having to stop after a certain distance of dragging,…

I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind (not to be confused with dragging and dropping). People are used to clicking, not holding, meaning they might never see the required secondary action of moving the mouse over a new button. You cou…

You can just show the menu on mousedown and activate the choice on mouseup. This supports both the case where the user first clicks the menu button and then the choice element and the one where the user holds down the mouse button over the menu element and releases it over the choice element.

Re: Creating a Radial Menu in CSS

#55

Earlier quoted context omitted.

The reason of the post is not the circular menu itself but the fact that it's entirely made in CSS. I think this is really impressive.

I'm genuinely curious: why is that exciting? I don't know a huge amount about the web stack.

As already mentioned it's just darn impressive, but there is also the big benefit of implementing stuff in css (when possible) over js that it generally performance much better, since all the animations are offloaded to the browsers rendering engine, rather than implemented in javascript. It usually gives a more robust and smooth result.

Re: Creating a Radial Menu in CSS

#56
post #13

Very impressive how close the answerer gets to the questioners mock up. Good job that man! And yet, I bet the designer will still come back and say the curve isn't right, or the bar isn't think enough. I think that's some impressive CSS.

Interestingly, 'that man' is apparently a woman: http://stackoverflow.com/users/1397351/ana

Oh yeah, so it is.

Didn't think to check. Doesn't make any difference to me, man or women. It's good work.

No offence intended.

Re: Creating a Radial Menu in CSS

#57
post #8

Very impressive how close the answerer gets to the questioners mock up. Good job that man! And yet, I bet the designer will still come back and say the curve isn't right, or the bar isn't think enough. I think that's some impressive CSS.

Why so much negativity? This post is months old—the designer never came back and complained, the answerer is a woman, not a man. :)

A little negativity maybe, but not "so much".

More of a joke at the expense of designers that like everything pixel perfect.

Re: Creating a Radial Menu in CSS

#58
post #21

I remember an article in Dr. Dobbs hailing pie menus as the future of user interfaces. It was the early 90's. I have always thought they were a great idea. Currently Microsoft Office One Note uses them. Here's a list of references for pie menus (the Dr. Dobbs article is cited): http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M... In fairness to Dr. Dobbs, they also hailed hypertext as the future about that…

1993's Secret of Mana was well known for its ring menu. I don't think radial menus are practical with mice, they fit controllers and console games better (where interacting with menus is slower).

Gosh I really miss Super Nintendo

Re: Creating a Radial Menu in CSS

#60
post #14

This is also known as a radial menu, and has some great properties that make it better (faster) than a normal context menu. You should be able to select an item from the menu in a single fast (distance insensitive) mouse gesture. Click down on the star, drag in the direction of an option, and release the mouse to select it. This way you can choose an option without having to stop after a certain distance of dragging,…

I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind (not to be confused with dragging and dropping). People are used to clicking, not holding, meaning they might never see the required secondary action of moving the mouse over a new button. You cou…

Maya (the 3D animation software) has had a radial menu with a gesture feature for as long as I can remember (4.0 I think). The beauty of it is that you can just use the menu slowly, or as you get familiar with the movements of your mouse (or stylus), just draw the movements and be done with it in a matter of seconds.

I've seen a friend of mine working on a detail model 7 years ago and he wasn't even thinking what he was doing. Just naturally drawing the path to the option he wanted (and god, the maya marking menu is damn full of options and context sensitive even) and boom, job done.

The ux for a Radial Menu (or also called a Pie Menu) is incredibly intuitive and allows for beginner and power user usage.

Post reply on HN