2007/06/01：

可伸缩菜单的做法

可伸缩菜单的做法 Roger Johansson 这次不仅仅告诉你怎样正确地做一个这样的可伸缩菜单，还把另外一个指导书上的代码拿来对比，其实 Cap&Design 杂志的指导也没什么大错，只是不如 Johansson 的简洁和严谨罢了，比如：

1.


   2.
Category 1

   3.

   4.
Submenu 1a
   5.
Submenu 1b
   6. 
   7. 
   8.
Category 2

   9.

  10.
Submenu 2a
  11.
Submenu 2b
  12. 
  13. 
  14.
Category 3

  15.

  16.
Submenu 3a
  17.
Submenu 3b
  18. 
  19. 
  20.

上面是 Johansson 的做法，下面是 capdesign 的：
1.


   2.
Category 1
   3.

   4.
Submenu 1
   5.
Submenu 1
   6. 
   7.
Category 2
   8.

   9.
Submenu 2
  10.
Submenu 2
  11. 
  12.
Category 3
  13.

  14.
Submenu 3
  15.
Submenu 3
  16. 
  17.

对比两段你就可以知道后者的问题：
1、同一个页面中，id 应该是唯一的；
2、用 CSS 隐藏了内容（比如 "display:none"），它想用 JavaScript 打开它，那么如果用户的浏览器关闭了 JS，就打不开内容了；
3、用内联 CSS 是可耻的；
4、用内联事件也是可耻的；
5、用了几个 list 组织菜单，那么为什么不用 li 代替 div 呢？

当然下面针对 CSS 和 JS 代码他同样作了对比，值得学习学习~~

链接 | 来源 ₪

RANDOM POSTS

[ 上 ] [ 下 ]已有9条评论

vampire @ 2007-06-01 01:30:54 #1
天..内联事件也可耻

这样写是很简单只是后面的js太…

oo (0) / xx (0)
athere @ 2007-06-01 07:55:43 #2
用内联 CSS 是可耻就可耻吧，我比较喜欢第一种。
反正CSS本来就要用。

oo (0) / xx (0)
xorms @ 2007-06-01 08:30:37 #3
FF下没有效果啊？！

oo (0) / xx (0)
xorms @ 2007-06-01 08:34:34 #4
抱歉……又好了……
奇怪了～

oo (0) / xx (0)
Yakizz @ 2007-06-01 08:35:23 #5
这个绝对是好东西……

oo (0) / xx (0)
dizzah @ 2007-06-01 09:26:24 #6
js看不懂。。。烦躁

oo (0) / xx (0)
黑星星 @ 2007-06-01 10:21:17 #7
最近学CSS，值得收藏

oo (0) / xx (0)
大猫 @ 2007-07-25 11:53:53 #8
赞,喜欢

oo (0) / xx (0)
NEO @ 2010-07-06 08:55:57 #9
好代码都被歼旦了…

oo (0) / xx (0)