4 ms·

I hacked on the core animation of the Path menu for a few minutes last week (it's pretty rough) using a combination of CSS and JS that is a bit leaner and more

by necolas 15y ago

I hacked on the core animation of the Path menu for a few minutes last week (it's pretty rough) using a combination of CSS and JS that is a bit leaner and more flexible. http://jsfiddle.net/necolas/RGYUg/ http://jsfiddle.net/necolas/RGYUg/ The benefit of using JS to calculate the positioning (especially in an environment where JS will always be enabled) is that you can have the menu items correctly positioned irrespective of the number of items. Edit: This is also an interesting approach: http://beaucollins.github.com/radial-menu/ http://beaucollins.github.com/radial-menu/

tingletech 15y ago
cool; I added some more css selectors (such as -moz and -o) and tested it on Firefox http://jsfiddle.net/RGYUg/5/ http://jsfiddle.net/RGYUg/5/ [edit; saw typo in fiddle, updated link]
masonhensley 15y ago
I like how beau's version collapses the nav buttons when you scroll up or down the page on my iPad. I haven't taken a look to see if it was intentional or a bug; but it's neat nontheless, if a user decided to scroll, I think that the nav should collapse out of the way. Can anyone comment on how the iOS path app behaves when you scroll?
- cmelbye 15y ago
  Touching anywhere other than an icon when the menu is open (including swiping to scroll) causes the menu to close.
jonah 15y ago
This is a great illustration of the difference between "works" and Works. This implementation is unsettling to me, while the original Path version is pleasant. It's hard to pin down - they're very close. (I think it's the animation speed and rapidly spinning icons mostly.) As someone put it in another post it's the difference between the works of Google/Microsoft et. al. and the Works of Apple, Path, etc. The former would see this and sign off - "it works" like we specified, while at latter, this would be a good first pass and then "make 10 refinements" to get it to "feel" right. No offense Beau, I'm just using yours as an example.

by necolas 15y ago

tingletech 15y ago

cool; I added some more css selectors (such as -moz and -o) and tested it on Firefox http://jsfiddle.net/RGYUg/5/ http://jsfiddle.net/RGYUg/5/ [edit; saw typo in fiddle, updated link]

masonhensley 15y ago

I like how beau's version collapses the nav buttons when you scroll up or down the page on my iPad. I haven't taken a look to see if it was intentional or a bug; but it's neat nontheless, if a user decided to scroll, I think that the nav should collapse out of the way. Can anyone comment on how the iOS path app behaves when you scroll?

cmelbye 15y ago
Touching anywhere other than an icon when the menu is open (including swiping to scroll) causes the menu to close.

jonah 15y ago

This is a great illustration of the difference between "works" and Works. This implementation is unsettling to me, while the original Path version is pleasant. It's hard to pin down - they're very close. (I think it's the animation speed and rapidly spinning icons mostly.) As someone put it in another post it's the difference between the works of Google/Microsoft et. al. and the Works of Apple, Path, etc. The former would see this and sign off - "it works" like we specified, while at latter, this would be a good first pass and then "make 10 refinements" to get it to "feel" right. No offense Beau, I'm just using yours as an example.