CSS 版的 Path 2.0 Menu

path

menu

CSS

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

1

tokki

Dec 5, 2011

你这孩子太好玩了

2

zythum

Dec 5, 2011

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

3

DXpro

Dec 5, 2011

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

4

zythum

Dec 5, 2011

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

5

romoo

Dec 5, 2011

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

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

6

flyingkid

Dec 5, 2011

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

7

DXpro

Dec 5, 2011

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

8

cutehalo

Dec 5, 2011

熊孩子太会玩了。。。

9

zythum

Dec 5, 2011

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

10

zythum

Dec 5, 2011

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

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

11

DXpro

Dec 5, 2011

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

12

iwege

Dec 5, 2011

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

13

iwege

Dec 5, 2011

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

14

roamlog

OP

Dec 5, 2011

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

15

romoo

Dec 5, 2011

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

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

16

roamlog

OP

Dec 5, 2011

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

17

zythum

Dec 5, 2011

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

18

romoo

Dec 5, 2011

@roamlog 恩 :-)

19

kirch

Dec 5, 2011

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

20

gDD

Dec 5, 2011 via iPod

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

21

gDD

Dec 5, 2011 via iPod

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

或者和Mobile Safari有关系。

22

iwege

Dec 5, 2011

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

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

23

kimcool

Dec 5, 2011

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

24

GordianZ

Dec 5, 2011 via iPhone

@sparanoid 童鞋内牛满面

25

Sivan

Dec 5, 2011

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

26

ytzong

Dec 5, 2011

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

27

sparanoid

Dec 5, 2011

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

@iwege 用的是 LESS

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

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

28

iwege

Dec 5, 2011

@sparanoid 经典，非常不错～

29

WarWithinMe

Dec 5, 2011

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

30

Sivan

Dec 5, 2011

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

31

chaos_mical

Dec 9, 2011

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