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.
Creating a Radial Menu in CSS
71–80 of 80 posts
Re: Creating a Radial Menu in CSS
#72If 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/
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 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.
Re: Creating a Radial Menu in CSS
#73Earlier 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…
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"
More like a guideline.
If the new UI has great workflow benefits, then a user can learn it and use -- and it could be a competitive advantage in its favor.
Re: Creating a Radial Menu in CSS
#74This is amazing.
But it makes me think about how much easier it would have been to make that in Flash 10 years ago. Sigh.
Re: Creating a Radial Menu in CSS
#75Really cool!
Re: Creating a Radial Menu in CSS
#76That'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?
Re: Creating a Radial Menu in CSS
#77I 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…
This one? The Design and Implementation of Pie Menus There're Fast, Easy, and Self-Revealing. Copyright (C) 1991 by Don Hopkins. Originally published in Dr. Dobb's Journal, Dec. 1991, lead cover story, user interface issue. http://www.donhopkins.com/drupal/node/98 More stuff at: Home > topics > Software > Pie Menus http://www.donhopkins.com/drupal/taxonomy_menu/4/49/14 And here are some pie menus for Unity3D: http://…
That is the one. Thank you. It made me miss the dead tree Dr. Dobbs.
Re: Creating a Radial Menu in CSS
#78Earlier quoted context omitted.
This one? The Design and Implementation of Pie Menus There're Fast, Easy, and Self-Revealing. Copyright (C) 1991 by Don Hopkins. Originally published in Dr. Dobb's Journal, Dec. 1991, lead cover story, user interface issue. http://www.donhopkins.com/drupal/node/98 More stuff at: Home > topics > Software > Pie Menus http://www.donhopkins.com/drupal/taxonomy_menu/4/49/14 And here are some pie menus for Unity3D: http://…
That is the one. Thank you. It made me miss the dead tree Dr. Dobbs.
Dr. Dobbs was wonderful, and I really looked forward to it every month. Ray Valdez wrote a good contract that said I retained the copyright, so I could republish it myself later, which was nice thing for him to do without me even thinking to ask.
And Creative Computing was a great computer magazine, too!
Re: Creating a Radial Menu in CSS
#79Earlier quoted context omitted.
That is the one. Thank you. It made me miss the dead tree Dr. Dobbs.
Dr. Dobbs was wonderful, and I really looked forward to it every month. Ray Valdez wrote a good contract that said I retained the copyright, so I could republish it myself later, which was nice thing for him to do without me even thinking to ask. And Creative Computing was a great computer magazine, too!
What struck me as I reread the article was that it had been through a rigorous editorial process. No cruft. That clarity is why it stuck with me twenty years on.
It always seemed wrong to throw magazines away, at least so long as they were packed up early as I prepared to move. About 1997 my computer magazines were not. After the books had been boxed, I'd had enough heavy lifting. Now few articles get read twice. Somewhere in a box in Orlando though there may still be a copy of Deskview X.