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

31–40 of 80 posts

Re: Creating a Radial Menu in CSS

#31

Post by robotresearcher »

cwilson wrote: post #18
robotresearcher wrote: post #16

Earlier quoted context omitted.

"I cannot think of a single instance of a popular web application that uses a click and hold mechanic of any kind." * Scrollbar thumbs, Drag and drop (gmail attachments, google map streetview guy), Drag to reposition, Rubber band selection (everywhere) * Drag blue dotas to modify text selection (iOS)

Drag and drop implies you're dragging one thing to another and then releasing. This is not the same as clicking, holding, and having something else you then have to move your cursor to appearing. I should have been more specific. I cannot think of a single instance of a popular web application or site that uses a click and hold mechanic to navigate or edit.

Drop-down menus.

Re: Creating a Radial Menu in CSS

#32

Post by jakerocheleau »

ecuzzillo wrote: post #27
antoinec wrote: post #10

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.

Usually JavaScript would be used to create the flyout menu effect like you see in the Dabblet. But since it's done in CSS3 any browsers which support those standard properties can work - no need for any JS code. It's just a neat workaround and very impressive IMO.

Re: Creating a Radial Menu in CSS

#33

Post by ngoel36 »

toyg wrote: post #7
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°-…

...so SASS?

Re: Creating a Radial Menu in CSS

#34

Post by brudgers »

jared314 wrote: post #22
brudgers wrote: post #19

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…

Every circular menu implementation i've seen still suffers from low command "density", lack of space for text, difficult to use sub-menus, maintaining predictable ordering, and, with touch UIs, commands hidden by the user's own finger. I really want them, but squares are easier to work with.

One of the selling points has been that they may be used gesturaly, rather than requiring explicit point and click positioning - ie they could be similar to keyboard input in the form of touch typing rather than relying on hand eye coordination.

Re: Creating a Radial Menu in CSS

#35

Post by alphakappa »

robotresearcher wrote: post #31
cwilson wrote: post #18

Earlier quoted context omitted.

Drag and drop implies you're dragging one thing to another and then releasing. This is not the same as clicking, holding, and having something else you then have to move your cursor to appearing. I should have been more specific. I cannot think of a single instance of a popular web application or site that uses a click and hold mechanic to navigate or edit.

Drop-down menus.

Dropdown menus are typically 'mouse-over and move mouse', not 'click-and-drag'

Re: Creating a Radial Menu in CSS

#36

Post by nthj »

ubermammal wrote: post #24

FWIW, it breaks if you use Tab to cycle through the links.

Unfortunately, CSS does not support a "has", "contains", or "parent" selector, which would be required to support this.

    .button:focus + .tip, .tip.open, .tip:has(a:focus)
One line of jQuery should solve:

    $('.tip a').focus(function(){ $('.tip').addClass('open'); }).blur(function(){ $('.tip').removeClass('open'); });

Re: Creating a Radial Menu in CSS

#37

Post by nthj »

ngoel36 wrote: post #33
toyg wrote: 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?

SASS could help you generate the required CSS, but you would still need some kind of customized markup, dynamic call to a SASS function, or JavaScript if you wanted to support a truly arbitrary/dynamic/database-driven number of buttons.

Re: Creating a Radial Menu in CSS

#38

Post by Gigablah »

alphakappa wrote: post #35
robotresearcher wrote: post #31

Earlier quoted context omitted.

Drop-down menus.

Dropdown menus are typically 'mouse-over and move mouse', not 'click-and-drag'

Combobox, then. They stay open once you click so you don't have to drag, but I've seen many users do the "click-and-drag" with it anyway.

Re: Creating a Radial Menu in CSS

#39

Post by robotresearcher »

alphakappa wrote: post #35
robotresearcher wrote: post #31

Earlier quoted context omitted.

Drop-down menus.

Dropdown menus are typically 'mouse-over and move mouse', not 'click-and-drag'

The original mac menus: click, hold, drag mouse to option you want, release mouse. Still works like that now, but the Windows-style click-release-move-click works too.

Re: Creating a Radial Menu in CSS

#40

Post by adventured »

jakerocheleau wrote: post #32
ecuzzillo wrote: post #27

Earlier quoted context omitted.

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

Usually JavaScript would be used to create the flyout menu effect like you see in the Dabblet. But since it's done in CSS3 any browsers which support those standard properties can work - no need for any JS code. It's just a neat workaround and very impressive IMO.

Do more browsers currently support JS or CSS3? (eg up to jquery 1.9 or similar) Not sure I've seen the stats on that as of yet and I'm curious.
Post reply on HN