CSS 版的 Path 2.0 Menu

path

menu

CSS

31 replies • 1970-01-01 08:00:00 +08:00

tokki

Dec 5, 2011

1

你这孩子太好玩了

zythum

Dec 5, 2011

2

这个比js做的同学强大 ...

DXpro

Dec 5, 2011

3

@zythum - -.我汗。看源码了吗你？

zythum

Dec 5, 2011

4

@DXpro 你好，你想说明什么...

romoo

Dec 5, 2011

5

http://www.v2ex.com/t/22743

怎样才能避免更多的重复内容出现呢？

flyingkid

Dec 5, 2011

6

触发用了jquery，动画效果是css3.0

DXpro

Dec 5, 2011

7

@zythum 没什么我只是不明白你说所得强大来自于哪里。

cutehalo

Dec 5, 2011

8

熊孩子太会玩了。。。

zythum

Dec 5, 2011

9

@romoo 不同的实现方式把。 css3的就对不起ie了。
@flyingkid 触发没法用css3做 ... 但是这个css3的效果应该算是顶级了。该用的都用了。
@DXpro 源码看怎么样了...

zythum

Dec 5, 2011

10

@DXpro css3的执行效率比js高很多。代码也更加简短。就除了对不起ie同学。

话说原来模仿dock，现在模仿path. 接下来该是谁了。

DXpro

Dec 5, 2011

11

@zythum 其他我赞同啊。只是。。我觉得如果css 是手写那很吐血的说。。－。－

iwege

Dec 5, 2011

12

@zythum
这个不算是顶级的，你看看WinJS的里面的动画效果，Win8的基本效果和基本架构都使用JS实现了一遍。微软的IE10还是非常不错的，除开那些私有属性和Grid layout之外。

iwege

Dec 5, 2011

13

@DXpro 所以我强烈的怀疑作者是使用less.js或者是类似的工具来编写的css..

roamlog

OP

Dec 5, 2011

14

@romoo 我有看到那个帖子，不过没注意楼下的回复，呃。。。

romoo

Dec 5, 2011

15

@zythum 朱一大萌神，我的意思是别的主题里面有童鞋发过这个链接了，

http://www.v2ex.com/t/22743

roamlog

OP

Dec 5, 2011

16

@romoo 我表达的好像是同一个意思吧，囧

zythum

Dec 5, 2011

17

@romoo = =。没仔细看回复。抱歉...

romoo

Dec 5, 2011

18

@roamlog 恩 :-)

kirch

Dec 5, 2011

19

说实话流畅程度没JS版高:-)

gDD

Dec 5, 2011 via iPod

20

@zythum 我在iOS里这个CSS版是最卡的。。。在桌面浏览器上没感觉。

gDD

Dec 5, 2011 via iPod

21

看来和实现方法有关系，这个CSS版本就非常流畅：
http://lab.victorcoulon.fr/css/path-menu/

或者和Mobile Safari有关系。

iwege

Dec 5, 2011

22

@gDD animation里面改变animation-timing-function 我艹....

楼主的那个可能没吃进加速。你发的这个使用了translate3d定位。相对思路来说楼主的那个要简单实用。

kimcool

Dec 5, 2011

23

css3，好吧。又见一种效果而已。

GordianZ

Dec 5, 2011 via iPhone

24

@sparanoid 童鞋内牛满面

Sivan

Dec 5, 2011

25

没仔细看css。不知道用:target的话能否做到纯CSS……

ytzong

Dec 5, 2011

26

CSS3动画的最大问题是导致屏幕突然黑一下（至少在Chrome中）

sparanoid

Dec 5, 2011

27

感谢 @roamlog 的推荐。现在增加了按钮点击后的动画，看起来更来福了

@iwege 用的是 LESS

@gDD 在 iOS 上放大了就会卡。我把 viewport 去掉了，能流畅些

@Sivan 能用 :target 做，但能力有限，我觉得细节做不到那么细致

iwege

Dec 5, 2011

28

@sparanoid 经典，非常不错～

WarWithinMe

Dec 5, 2011

29

@zythum 确实，CSS要比JS流畅。。。chrome问题不大，但是其他浏览器真的太慢了。。。IE同学对不对得起都没所谓啦。。。反正用IE的都不会欣赏这种效果啦。。。

Sivan

Dec 5, 2011

30

http://lab.victorcoulon.fr/css/path-menu/
这个是个法国人用纯 CSS 做的，跟 LZ 这个效果差不多～

chaos_mical

Dec 9, 2011

31

@Sivan 早晨刚刚fork，看了一下法国这个思路蛮新颖的，一个checkbox的input，通过:checked判断点击，套label for代替