As another commenter here notes, this is in fact a “radial menu.”<p>Terminology is important. Language loses power when we use words incorrectly, so please: Do not call this a “tooltip.” Tooltips are <i>only</i> ever displayed on hover (and disappear when the mouse leaves the described object — originally, the tool for which the tip was needed!)
This is also known as a radial menu, and has some great properties that make it better (faster) than a normal context menu.<p>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.<p>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.
If you don't need all that glitz, here's a jQuery plug-in: <a href="http://zikes.github.io/circle-menu/" rel="nofollow">http://zikes.github.io/circle-menu/</a><p>The best (semi)circular menus I've seen recently are in the iD editor for OpenStreetMap: <a href="http://ideditor.com/" rel="nofollow">http://ideditor.com/</a>
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.<p>link for the curious: <a href="http://www.droid-life.com/2012/02/07/tip-browser-quick-controls-expanded-in-android-4-0-4/" rel="nofollow">http://www.droid-life.com/2012/02/07/tip-browser-quick-contr...</a>
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.<p>Currently Microsoft Office One Note uses them.<p>Here's a list of references for pie menus (the Dr. Dobbs article is cited):<p><a href="http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20Menu%20References.htm" rel="nofollow">http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M...</a><p>In fairness to Dr. Dobbs, they also hailed hypertext as the future about that time, and that one they nailed.
Very impressive how close the answerer gets to the questioners mock up. Good job that man!<p>And yet, I bet the designer will still come back and say the curve isn't right, or the bar isn't think enough.<p>I think that's some impressive CSS.
I made a similar tool for quickly navigating between tabs in Chrome:<p><a href="http://www.appsforartists.com/get_app/chrome_marking_menu/?source=hn" rel="nofollow">http://www.appsforartists.com/get_app/chrome_marking_menu/?s...</a>
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.
That's getting nice right there -- slick CSS implementation and a sweet design.<p>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.<p>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.<p>For anyone interested, here are some examples using the radmenu plugin: <a href="http://tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4" rel="nofollow">http://tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4</a>. Also, my site opens up with a radial menu: <a href="http://www.tikku.com" rel="nofollow">http://www.tikku.com</a>.<p>Would love to hear thoughts from any other folks that have actually experimented with the radial menu interface?<p>[1]<a href="http://plugins.jquery.com/radmenu/" rel="nofollow">http://plugins.jquery.com/radmenu/</a>
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.<p>I wonder if the people who have posted the flagship answers on Stack Overflow know what heroes they are.
WebPie is a JavaScript version of the same: <a href="http://www.markusfisch.de/" rel="nofollow">http://www.markusfisch.de/</a><p>It's smoother and more responsive than the jQuery plugin mentioned in this thread.<p>And, of course, the site above has the incomparable PieDock for Linux/BSD.
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.