Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Path menu in pure CSS3

lab.victorcoulon.fr

Post reply on HN
Print view View original

21–30 of 55 posts

Re: Path menu in pure CSS3

#21

Post by necolas »

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/

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/

Re: Path menu in pure CSS3

#22

Post by exogen »

alex_h wrote: post #12

Can someone enlighten me as to why "pure CSS" is seen as the pinnacle of web design? It seems that for problems involving a computational element like this, Javascript would be much more concise and readable. Having said that, it is beautifully done.

In addition to what the other replies said, there's another reason: effects like this reside purely in the presentation layer, and just like the argument for separating content from presentation, a good argument can be made for trying to separate application code from presentation as much as possible. The less animation you're doing with JavaScript, the less your application code will have worry about updating the presentation layer in a loosely coupled way – just changing a CSS class or whatever already provides that (relatively) loose coupling.

At BigDoor, we ship the same JavaScript code to many different partners, but their widgets can have very different form factors and visual effects. It's nice to not have to distribute a bunch of animation code to every partner just in case one partner's theme happens to use it – we can keep it in the CSS and just swap that out.

Soon I think people will see that using JavaScript for the simple animations they've been performing all this time (fade out, slide in, etc.) is just creating a tightly coupled system.

Re: Path menu in pure CSS3

#23

Post by tingletech »

necolas wrote: post #21

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/ 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:…

cool; I added some more css selectors (such as -moz and -o) and tested it on Firefox

http://jsfiddle.net/RGYUg/5/

[edit; saw typo in fiddle, updated link]

Re: Path menu in pure CSS3

#24

Post by gue5t »

alex_h wrote: post #12

Can someone enlighten me as to why "pure CSS" is seen as the pinnacle of web design? It seems that for problems involving a computational element like this, Javascript would be much more concise and readable. Having said that, it is beautifully done.

Javascript is turing-complete. That's a /lot/ of power and that means that security-conscious users (especially given the proliferation of more-powerful JS apis allowing the possibility for exploits in file, GPU, etc. access, along with JIT-enabled exploits as opposed to the old simple interpreting) will have it turned off whenever possible.

Using CSS for non-turing-complete interactions which are limited in their computational ability to a simple automaton means that CSS can be trusted much more than JS, and that there are stricter guarantees on performance. It's also semantically cleaner when used for things like visual effects on windows, because even if CSS doesn't load, the markup representing the menu will be intact. JS systems have the ability to load markup asynchronously or generate it from other data in the page and destroy all notion of graceful degradation.

Re: Path menu in pure CSS3

#26

Post by jklp »

mundizzle wrote: post #20
steve8918 wrote: post #7

Obviously Path has done something great in terms of coming up with a beautiful, innovative menu design. Do people here think that Path should have been granted some type of protection so that others couldn't copy its look and feel so quickly, or it is okay that competitors have come out almost immediately? I am just asking the question, I'm not sure how I feel about the issue. I'm against software patents, but I coul…

i'm sorry, i don't understand who is competing or how this hurts Path. all i've seen are people being inspired by Path, saying as much, then cleverly recreating the effect for themselves. these same people turn around and share their own code with the rest of the world via blog post or GitHub. if anything this has helped spread the word about Path. this was how i first heard of them. throw in a bunch of people sharin…

  > i'm sorry, i don't understand who is competing or how 
  > this hurts Path.
  >
  > all i've seen are people being inspired by Path, saying 
  > as much, then cleverly recreating the effect for 
  > themselves. these same people turn around and share
  > their own code with the rest of the world via blog post
  > or GitHub.
Looking at this from the perspective of Path, who have probably spent a fair amount of time thinking and conceiving the menu widget. Not just in how to implement it, but actually coming up with the idea, creating mock ups / wire frames, iterating on those mock ups, designing the icons, the animations, etc. All this for the sole purpose to give the user experience something new, and also to add a bit of delight to an app which could have easily become "yet another social networking app".

Then someone comes along and copied all their hard work (without figuring out the concept, the design, the animation, etc) and (as if to rub salt into the wounds) released it for free for everyone to use.

Honestly, if I were Path I'd be rather frustrated that this has happened though as a developer I love the fact that someone has done this and shared their work :)

Re: Path menu in pure CSS3

#28

Post by jasonlotito »

jklp wrote: post #26
mundizzle wrote: post #20

Earlier quoted context omitted.

i'm sorry, i don't understand who is competing or how this hurts Path. all i've seen are people being inspired by Path, saying as much, then cleverly recreating the effect for themselves. these same people turn around and share their own code with the rest of the world via blog post or GitHub. if anything this has helped spread the word about Path. this was how i first heard of them. throw in a bunch of people sharin…

> i'm sorry, i don't understand who is competing or how > this hurts Path. > > all i've seen are people being inspired by Path, saying > as much, then cleverly recreating the effect for > themselves. these same people turn around and share > their own code with the rest of the world via blog post > or GitHub. Looking at this from the perspective of Path, who have probably spent a fair amount of time thinking and conc…

Wait, you mean to tell me you think this menu idea is unique and original? Oh, it's not seen that often, for sure, but it's not unique or original. It is well worn territory, used in a variety of applications prior to Path. This example might have seen their design and drawn inspiration from it, but they aren't the originators of this.

Re: Path menu in pure CSS3

#29

Post by WalterGR »

miles_matthias wrote: post #4
robin_reala wrote: post #2

Would work in Firefox too with if the author had bothered to add the -moz-animation rules.

Well the code is on github - fork it and update it!

I don't understand the "you aren't allowed to comment if you haven't submitted code" sentiment.

Re: Path menu in pure CSS3

#30

Post by masonhensley »

necolas wrote: post #21

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/ 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:…

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?

Post reply on HN