8 ms·
Creating a Radial Menu in CSS
- grizzy 13y agoReally cool!
- drewda 13y agoIf you don't need all that glitz, here's a jQuery plug-in: http://zikes.github.io/circle-menu/ 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/ http://ideditor.com/
- antoinec 13y agoThe 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 13y agoI'm genuinely curious: why is that exciting? I don't know a huge amount about the web stack.
- jakerocheleau 13y agoUsually 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 13y agoDo 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 13y agoDo 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 13y agoEven if they do it can be turned off pretty easy. CSS wouldn't be affected in that way (I would think).
- mmahemoff 13y agoAll 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/ 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.
- troels 13y agoAs already mentioned it's just darn impressive, but there is also the big benefit of implementing stuff in css (when possible) over js that it generally performance much better, since all the animations are offloaded to the browsers rendering engine, rather than implemented in javascript. It usually gives a more robust and smooth result.
- SimHacker 13y agoI agree -- it's some really elegant and powerful CSS code, which is a great example of what you can do with modern CSS, but I don't think it's meant to be about the actual interaction design, or meant to say that you should do everything in CSS and not use JavaScript. As a practical matter, you need JavaScript to achieve the best usability, reusability, flexibility, etc. But it should serve as an example to JavaScript widget designers how much you can do in CSS. It's an interesting and difficult problem designing a JavaScript pie menu component that let you easily and deeply customize it in CSS.
- SimHacker 13y agoThe radial menu in the stackoverflow article has some really elegant and concentrated CSS code, and I learned a lot by looking at it. I didn't realize you could do that kind of stuff! The tradeoff of using pure CSS and very little JavaScript is that it's not a flexible, reusable, data driven component, that lets you plug in your own graphics, content and behavior. I think it's a great idea to offload as much of the graphics and feedback to CSS as possible, but I don't see any practical reason for avoiding JavaScript and using pure CSS. Anyway, as a rule of thumb, people who use modern browsers with JavaScript turned off do it because they like to whine about how persecuted they are, and I would never presume to begrudge them that opportunity. The nature of user interface design is that when the rubber hits the road, there will always be millions of specific little tweaks you have to do to make things easier for the user and integrate with the application, and you can only do so much in CSS before you hit a wall and have to use JavaScript. Of course it's great for the JavaScript code to leverage CSS as much as possible to make the menus graphically rich and easily customizable, and many of the CSS techniques of this particular example with a fixed menu could be applied to a more general purpose JavaScript widget. But what it boils down to is that you really need the power and generality of JavaScript to support more sophisticated tracking, feedback, data driven menus with dynamic layout, application specific presentation and tracking feedback, etc. Then you can get on to the harder problem like making it easy to design, build and measure pie menus that are most efficient and easy for users to remember, learn and use. And that depends a lot on the environment and the tools that you are using. For example, these pie menus for Unity3D leverage the Unity editor and 3D object manipulation tools, and they have ways to tightly integrate your own application, content, graphics, animation and feedback: http://www.youtube.com/watch?v=sMN1LQ7qx9g http://www.youtube.com/watch?v=sMN1LQ7qx9g
- wubbfindel 13y agoVery 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.
- aidos 13y agoAnd it works smoothly on my mobile. I'm impressed.
- avree 13y agoWhy so much negativity? This post is months old—the designer never came back and complained, the answerer is a woman, not a man. :)
- wubbfindel 13y agoA little negativity maybe, but not "so much". More of a joke at the expense of designers that like everything pixel perfect.
- state 13y agoInterestingly, 'that man' is apparently a woman: http://stackoverflow.com/users/1397351/ana http://stackoverflow.com/users/1397351/ana
- wubbfindel 13y agoOh 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.
- gokulk 13y agolooks nice.. thanks for sharing
- nthitz 13y agoGreat 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 13y agoI'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 13y ago...so SASS?
- nthj 13y agoSASS 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 13y agoA number of different static CSS files even - static5.css Or a serverside script in your favourite language - static.css?slices=5
- _ZeD_ 13y agoshouldn't this be calc()[0] work? [0] https://developer.mozilla.org/en-US/docs/CSS/calc https://developer.mozilla.org/en-US/docs/CSS/calc
- ionforce 13y agoIt's a variant of the "pie menu".
- cookingrobot 13y agoThis 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 13y agoI 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.
- robotresearcher 13y ago"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)
- cwilson 13y agoDrag 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.
- dopamean 13y agoFor some reason on my computer that it renders like this: http://i.imgur.com/ycKsaim.png http://i.imgur.com/ycKsaim.png
- brudgers 13y agoI 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%20Menu%20References.htm http://www.cs.cornell.edu/boom/2001sp/bronevetsky/Circle%20M... In fairness to Dr. Dobbs, they also hailed hypertext as the future about that time, and that one they nailed.
- Odin9 13y ago1993'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 13y agoAgreed, I think that radial menus are only really good for touch screens.
- Ascendancy 13y agoGosh I really miss Super Nintendo
- jared314 13y agoEvery 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.
- brudgers 13y agoOne 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.
- ubermammal 13y agoFWIW, it breaks if you use Tab to cycle through the links.
- nthj 13y agoUnfortunately, 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'); });
- bsimpson 13y agoI made a similar tool for quickly navigating between tabs in Chrome: http://www.appsforartists.com/get_app/chrome_marking_menu/?source=hn http://www.appsforartists.com/get_app/chrome_marking_menu/?s...
- habosa 13y agoI 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-controls-expanded-in-android-4-0-4/ http://www.droid-life.com/2012/02/07/tip-browser-quick-contr...
- hrayr 13y agoThe stock camera app in Jelly Bean also has a particularly good implementation of a radial menu.
- alanh 13y agoAs 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!)
- fractallyte 13y agoWebPie is a JavaScript version of the same: http://www.markusfisch.de/ 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.
- modarts 13y agoAnyone find the "Anna, marry me?" comment to be a tad sexist? /ducks
- Sharlin 13y agoYes. Not to mention the one commenter that "would like to stalk" her. Flagged that one.
- kpapke 13y agoMy friend created this: http://permalightnyc.com/experiments/radial-menu http://permalightnyc.com/experiments/radial-menu
- tomasien 13y agoIt'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.
- tomasien 13y agoWhooaaa 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.
- SolarUpNote 13y agoThis is amazing. But it makes me think about how much easier it would have been to make that in Flash 10 years ago. Sigh.
- nirvanatikku 13y agoThat'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 http://tikku.com/jquery-radmenu-plugin#radmenu_tutorial_4. Also, my site opens up with a radial menu: http://www.tikku.com 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/ http://plugins.jquery.com/radmenu/