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

41–50 of 80 posts

Re: Creating a Radial Menu in CSS

#41

Post by habosa »

adventured wrote: post #40
jakerocheleau wrote: post #32

Earlier quoted context omitted.

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.

Do any browsers with any real marketshare (even a tenth of a percent) not support JavaScript? I can't think of any examples although I've never had any reason to dive too deep into browser compatibility specifics for my projects.

Re: Creating a Radial Menu in CSS

#42

Post by habosa »

I love pie menus. The stock Android Browser's hidden "quick controls" are incredible and by far the fastest way to use a mobile web browser. You slide your thumb in off the side of the screen and then in the same motion move to the action you're looking for and simply release to activate. It's not obvious unless you show the user it's there but once you have it you don't want to go back.

link for the curious: http://www.droid-life.com/2012/02/07/tip-browser-quick-contr...

Re: Creating a Radial Menu in CSS

#43

Post by mmahemoff »

adventured wrote: post #40
jakerocheleau wrote: post #32

Earlier quoted context omitted.

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.

All mainstream browsers support JS and CSS, the question is how recent and what specific features. "CSS3" really means a whole ton of features and support varies.

Your typical "CSS3 demo" on HN will work well on Opera, Firefox, Chrome, Safari. It should work on IE10, has a 50/50 chance of working on IE9, and probably won't work on IE8 and below.

Check out http://caniuse.com/ to see which features are supported on each browser.

One other thing to mention is that users might turn off JavaScript support and screenreaders will have issues with some things JavaScript apps do. It was much more of an issue 5-10 years ago than it is today though.

Re: Creating a Radial Menu in CSS

#44

Post by hfsktr »

habosa wrote: post #41
adventured wrote: post #40

Earlier quoted context omitted.

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.

Do any browsers with any real marketshare (even a tenth of a percent) not support JavaScript? I can't think of any examples although I've never had any reason to dive too deep into browser compatibility specifics for my projects.

Even if they do it can be turned off pretty easy. CSS wouldn't be affected in that way (I would think).

Re: Creating a Radial Menu in CSS

#45

Post by alanh »

As another commenter here notes, this is in fact a “radial menu.”

Terminology is important. Language loses power when we use words incorrectly, so please: Do not call this a “tooltip.” Tooltips are only ever displayed on hover (and disappear when the mouse leaves the described object — originally, the tool for which the tip was needed!)

Re: Creating a Radial Menu in CSS

#46

Post by mctx »

nthj wrote: post #37
ngoel36 wrote: post #33

Earlier quoted context omitted.

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

A number of different static CSS files even - static5.css

Or a serverside script in your favourite language - static.css?slices=5

Re: Creating a Radial Menu in CSS

#47

Post by hrayr »

habosa wrote: post #42

I love pie menus. The stock Android Browser's hidden "quick controls" are incredible and by far the fastest way to use a mobile web browser. You slide your thumb in off the side of the screen and then in the same motion move to the action you're looking for and simply release to activate. It's not obvious unless you show the user it's there but once you have it you don't want to go back. link for the curious: http://…

The stock camera app in Jelly Bean also has a particularly good implementation of a radial menu.

Re: Creating a Radial Menu in CSS

#48

Post by baby »

coldtea wrote: post #17
cwilson wrote: post #14

Earlier quoted context omitted.

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…

> I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. It doesn't matter if they are confused "the first time around" as long as they can do their job better and faster the second and nth time around. That's how UI progresses -- not just by self-evident things, but also by people learning new idioms. >I cannot think of a single instance of a popular web applic…

for an OS maybe. But one of the many rules of web UI is that "the user shouldn't have to learn a new UI by visiting your website"

Re: Creating a Radial Menu in CSS

#49

Post by jtchang »

cwilson wrote: post #14
cookingrobot wrote: post #11

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…

The camera app on the nexus 4 has the mechanic where you need to hold down and get a radial menu. It took me a while to figure it out at first.

Re: Creating a Radial Menu in CSS

#50

Post by apk17 »

cwilson wrote: post #20
coldtea wrote: post #17

Earlier quoted context omitted.

> I think you'd find a majority of users would be confused by this, as cool as it sounds, the first time around. It doesn't matter if they are confused "the first time around" as long as they can do their job better and faster the second and nth time around. That's how UI progresses -- not just by self-evident things, but also by people learning new idioms. >I cannot think of a single instance of a popular web applic…

This is completely subjective, but I'd prefer to design interactions around what I know my users are already comfortable with. My goal is to enable my users to get to their end goal with the least amount of friction as possible. Why would I train a user to learn something new when the method in the OP achieves the exact same result, without a learning curve? All I can see improving with the click, hold, and release m…

May I remind you that, once upon a time, all menus were click-and-hold?

(Okok, I'm not actually sure about either mac or xerox.)

Post reply on HN