Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Creating a Radial Menu in CSS

stackoverflow.com

Post reply on HN
Print view View original

1–10 of 80 posts

Re: Creating a Radial Menu in CSS

#3

Post by wubbfindel »

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.

Re: Creating a Radial Menu in CSS

#5

Post by nthitz »

Great demo. Not to nitpick, but the original poster's question was about a 3 item menu. It would be nice if the CSS allowed arbitrary number of elements. Right now, deleting one of the 5 links seems to break the design. Seems like something SASS could handle.

Re: Creating a Radial Menu in CSS

#6

Post by aidos »

wubbfindel wrote: post #3

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.

And it works smoothly on my mobile. I'm impressed.

Re: Creating a Radial Menu in CSS

#7

Post by toyg »

nthitz wrote: post #5

Great demo. Not to nitpick, but the original poster's question was about a 3 item menu. It would be nice if the CSS allowed arbitrary number of elements. Right now, deleting one of the 5 links seems to break the design. Seems like something SASS could handle.

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°-A°; here A° = the angle for 1 slice = 30° 
  */
So there's a calculation to be done. I guess there are various ways to get around that.

Re: Creating a Radial Menu in CSS

#8

Post by avree »

wubbfindel wrote: post #3

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. :)

Re: Creating a Radial Menu in CSS

#10

Post by antoinec »

drewda wrote: post #2

If you don't need all that glitz, here's a jQuery plug-in: http://zikes.github.io/circle-menu/ The best (semi)circular menus I've seen recently are in the iD editor for OpenStreetMap: http://ideditor.com/

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.
Post reply on HN