CSS 版的 Path 2.0 Menu

path

menu

CSS

31 条回复 • 1970-01-01 08:00:00 +08:00

1

tokki

2011-12-05 09:27:05 +08:00

你这孩子太好玩了

2

zythum

2011-12-05 09:58:33 +08:00

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

3

DXpro

2011-12-05 10:02:51 +08:00

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

4

zythum

2011-12-05 10:04:35 +08:00

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

5

romoo

2011-12-05 10:07:02 +08:00

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

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

6

flyingkid

2011-12-05 10:09:17 +08:00

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

7

DXpro

2011-12-05 10:11:16 +08:00

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

8

cutehalo

2011-12-05 10:11:20 +08:00

熊孩子太会玩了。。。

9

zythum

2011-12-05 10:14:38 +08:00

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

10

zythum

2011-12-05 10:18:54 +08:00

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

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

11

DXpro

2011-12-05 10:24:30 +08:00

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

12

iwege

2011-12-05 10:25:20 +08:00

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

13

iwege

2011-12-05 10:27:58 +08:00

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

14

roamlog

OP

2011-12-05 10:30:13 +08:00

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

15

romoo

2011-12-05 10:48:32 +08:00

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

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

16

roamlog

OP

2011-12-05 11:37:26 +08:00

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

17

zythum

2011-12-05 11:42:33 +08:00

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

18

romoo

2011-12-05 11:49:28 +08:00

@roamlog 恩 :-)

19

kirch

2011-12-05 12:30:45 +08:00

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

20

gDD

2011-12-05 12:34:08 +08:00 via iPod

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

21

gDD

2011-12-05 13:30:41 +08:00 via iPod

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

或者和Mobile Safari有关系。

22

iwege

2011-12-05 15:16:08 +08:00

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

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

23

kimcool

2011-12-05 15:28:40 +08:00

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

24

GordianZ

MOD

2011-12-05 15:46:30 +08:00 via iPhone

@sparanoid 童鞋内牛满面

25

Sivan

2011-12-05 15:56:45 +08:00

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

26

ytzong

2011-12-05 17:19:56 +08:00

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

27

sparanoid

MOD

2011-12-05 18:08:11 +08:00

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

@iwege 用的是 LESS

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

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

28

iwege

2011-12-05 18:33:49 +08:00

@sparanoid 经典，非常不错～

29

WarWithinMe

2011-12-05 18:45:56 +08:00

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

30

Sivan

2011-12-05 21:56:21 +08:00

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

31

chaos_mical

2011-12-09 16:31:06 +08:00

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