

Creating a Radial Menu in CSS - msvan
http://stackoverflow.com/questions/13132864/circular-tooltip/13137862#13137862

======
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!)

------
cookingrobot
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, and you
can memorize the different directions of frequently used commands.

This demo doesn't implement that behavior yet though - so while it looks cool
this version is still missing the big benefit of this type of ui.

~~~
cwilson
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 could of course add some kind of time delay, but then they would simply be
clicking a second time to interact, and this defeats the entire purpose of the
click and hold mechanic.

This is not to say I don't think you could train users to get used to this
mechanic, but from a first-time user perspective, this still falls under "bad
UX" in my book.

~~~
coldtea
> _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 application that uses
a click and hold mechanic of any kind._

The "kudos" button on Subtle is "hover and hold". I'm sure there are others.

~~~
cwilson
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 method is enhanced
"cool factor".

~~~
coldtea
> _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._

Well, there's a compromise, though, between:

(a) "designing interactions around what I know my users are already
comfortable with"

(b) "enabling users to get to their end goal with the least amount of friction
as possible"

in all cases where an initial unfamiliarity with a new idiom lowers the
friction for hundreds of subsequent uses.

As a crude example, consider "undo" in a painting application. Say the user
wants to erase all he did up to this point. We could let the artists work the
way they are "already familiar with" (paint on top to cover their mistakes, or
use some eraser tool to delete the whole thing part by part).

But by having them learn the concept of "undo", they could achieve the same
effect faster. And even better if the learned the concept of "history"
(jumping to arbitrary undo states).

(Now in those cases, all the above options can also be present at all times --
so the users don't have to give up one for another. But there are other cases
where this is not the case, and you have to decide upon the better but new way
to design a control vs the old, clunkier, but familiar).

------
drewda
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/>

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

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

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

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

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

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

------
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...](http://www.droid-life.com/2012/02/07/tip-browser-quick-controls-
expanded-in-android-4-0-4/)

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

------
brudgers
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...](http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20Menu%20References.htm)

In fairness to Dr. Dobbs, they also hailed hypertext as the future about that
time, and that one they nailed.

~~~
Odin9
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).

~~~
pazimzadeh
Agreed, I think that radial menus are only really good for touch screens.

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

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

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

------
bsimpson
I made a similar tool for quickly navigating between tabs in Chrome:

[http://www.appsforartists.com/get_app/chrome_marking_menu/?s...](http://www.appsforartists.com/get_app/chrome_marking_menu/?source=hn)

------
modarts
Anyone find the "Anna, marry me?" comment to be a tad sexist? /ducks

~~~
Sharlin
Yes. Not to mention the one commenter that "would like to stalk" her. Flagged
that one.

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

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

~~~
ngoel36
...so SASS?

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

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

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

------
nirvanatikku
That's getting nice right there -- slick CSS implementation and a sweet
design.

Having authored a jQuery Radial Menu plugin[1], I'll add that I have seen
significant interest in the interface/plugin from a ton of folks over the
years, but few real world implementations that have engaged me beyond first
glance.

Personally I find the interface best utilized in situations where I'd rather
not divert my attention and am performing similar tasks frequently - like in
some games. When it comes to getting _creative_ with the UI component as a
developer, though, I've found it tough to do _really_ well. It gets gimmick-y
quickly. Path's QuadCurveMenu has been the best implementation of any type of
circular menu that I've seen. Summly had a radial menu as well, but I didn't
find it particularly useful - just fun to play with.

For anyone interested, here are some examples using the radmenu plugin:
<http://tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4>. Also, my site
opens up with a radial menu: <http://www.tikku.com>.

Would love to hear thoughts from any other folks that have actually
experimented with the radial menu interface?

[1]<http://plugins.jquery.com/radmenu/>

------
tomasien
It's amazing the economic value Ana created by posting this. It's gorgeous,
and every single web designer can (and where appropriate, should) now use this
to make themselves look SO much better.

I wonder if the people who have posted the flagship answers on Stack Overflow
know what heroes they are.

------
fractallyte
WebPie is a JavaScript version of the same: <http://www.markusfisch.de/>

It's smoother and more responsive than the jQuery plugin mentioned in this
thread.

And, of course, the site above has the incomparable PieDock for Linux/BSD.

------
tomasien
Whooaaa I just realized, unless I'm mistaken, this isn't actually a functional
menu. If you add actual href's to the menu items, they don't take you anywhere
because as soon as they're clicked the focus is removed, so the href does
nothing.

------
kpapke
My friend created this: <http://permalightnyc.com/experiments/radial-menu>

------
dopamean
For some reason on my computer that it renders like this:
<http://i.imgur.com/ycKsaim.png>

~~~
coldtea
It would so much more valuable if you also included browser and version!

~~~
dopamean
lol. Pardon me. Chrome Version 26.0.1410.65 (up to date)

------
SolarUpNote
This is amazing.

But it makes me think about how much easier it would have been to make that in
Flash 10 years ago. Sigh.

------
ionforce
It's a variant of the "pie menu".

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

~~~
nthj
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'); });

------
gokulk
looks nice.. thanks for sharing

------
grizzy
Really cool!

