纯 CSS 下拉菜单
-
23-09-2019 - |
题
我一直在开发 facebook 应用程序,你知道在 facebook 上不允许使用本机 javascript,他们有自己的实现 FBJS,这在创建菜单等内容时很麻烦。
有没有 纯CSS下拉解决方案 没有任何 javascript 的参与(我见过的所有解决 IE6 的解决方案都使用了 javascript)?
解决方案
是的,有很多方法。看一下 列表式.
您能否采用一个简单的列表并使用不同的级联样式表来创建完全不同的列表选项?Listamatic 显示了 CSS 在应用于一个简单列表时的强大功能。
有垂直和水平菜单,使用纯CSS。
一些工作示例:
- http://www.xs4all.nl/~peterned/examples/cssmenu.html
- http://www.tjkdesign.com/articles/dropdown/demo.asp
实际上,您可以用几行代码实现一个基本列表:
li ul { display: none; }
li:hover > ul { display: block; }
请注意,如果您支持 IE6,则需要 JavaScript(因为它不适用于 li:hover)。
其他提示
谷歌最近开始 逐步取消 IE6 支持 并通知域客户的应用程序升级其用户。除非您服务的市场或客户群您知道正在使用 IE6 并且无法或不愿意升级,否则我会忽略它并使用 :hover 解决方案,无需使用 javascript。
不隶属于 StackOverflow