可伸缩菜单的做法 8+

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.

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

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

链接 | 来源