在Stu Nicholls的http://www.cssplay.co.uk/中看见纯CSS下拉菜单,抛开他兼容性设计,CSS部分,他让我知道了,原来css中的路径可以跨越:hover继续定义……。
我一直使用路径法定义样式,但是从来没想过跨越:hover,再长的路径到:hover就是一个终点。
能跨越,不用JS的下拉就很好理解了。下拉ul/ol部分display:none,之前是通过js去改变这个属性,跨越后就是:ul li a:hover ul{display: block}。至于横向纵向各种花样都简单,关键就是这个跨越。
为什么我没想到?为什么!被严重打击,反思……
感谢Stu Nicholls,他的兼容性设计更值得我学习。
PS: 这种菜单还是有局限,就是你必须为每个级定义一个路径css,无法循环应用,也就不能“无限”,只能“有限”的定义,当然或许一般而言影响不大,我可以预先定义四级,满足绝大部分需求。但是仍然是有限的在定义。若非解决不可的话,可以把循环写进程序或者js,但违背了纯css的初衷,虽然技术一定要互补才能最大化的发挥,但是仍然盼望着,琢磨着什么时候才能出现可编程的“CSS”啊?又或者已有而我不知……
2006 04-08
发现事情远没我想得简单,不是仅仅跨越了:hover就能解决问题的,这里还涉及到table、visibility的使用。不使用table,下拉不会显示(为什么啊?);不使用visibility,三级菜单一旦被激活就不消失了(为什么啊?)。这个牛人啊,佩服中……
菜单还有不少细节问题没有解决,例如文字自适应宽度。他的做法是定宽,定宽对于OA系统中文字长短不一的各级中文菜单不太合适。继续琢磨……
2006 04-10