您现在的位置是:首页  >  前端 >  前端开发 CSS+DIV

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu_经验交流

博主 添加时间:2017-05-12 01:42:20 【CSS+DIV】 热度:2313人已围观

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu


摘要:
本文介绍了使用 CSS 编写适用于 Opera, Firefox, IE 的多风格弹出菜单

说明:
编写 CSS 弹出菜单的要点不外乎当鼠标移到目标上时, 显示出隐藏的标签.
要隐藏的标签使用 display:none; 属性进行隐藏.
触发显示隐藏标签主要使用 :hover 属性, 并用 display:block; 显示隐藏的标签.

但由于浏览器对 CSS 的支持并非一致.
对于 Opera 或者 Firefox, 我们可以编写出纯 CSS 菜单, 他们支持任何标签的 :hover 属性.
而对于 IE 浏览器, :hover 只对 a 标签起作用, 但我们可以使用脚本的 onmouseover, onmouseout 模拟出其他标签的 :hover 属性.
因此编写适用于 IE 的 CSS 弹出菜单必须使用到少许的脚本.

目录:
1. 编写直排右侧弹出的 CSS 菜单.
1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)

2. 编写横排底部弹出的 CSS 菜单.
2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)

3. 结论

4. 预览

shawl.qiu
2006-10-01
http://blog.csdn.net/btbtd

1. 编写直排右侧弹出的 CSS 菜单.

1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
    linenum
  1. LI>" http://www.w3.org/TR/html4/loose.dtd">
  2. Untitled Document
  3. level

  4. level_ title

  5. level_ title 1
  6. level_ title 2
  7. level_ title 3
  8. level_ title 4
  9. level_ title 5
  10. level 1

  11. level_ title

  12. level_ title 1
  13. level_ title 2
  14. level_ title 3
  15. level_ title 4
  16. level_ title 5
  17. level 2

  18. level_ title

  19. level_ title 1
  20. level_ title 2
  21. level_ title 3
  22. level_ title 4
  23. level_ title 5
  24. level 3

  25. level_ title

  26. level_ title 1
  27. level_ title 2
  28. level_ title 3
  29. level_ title 4
  30. level_ title 5
  31. level 4

  32. level_ title

  33. level_ title 1
  34. level_ title 2
  35. level_ title 3
  36. level_ title 4
  37. level_ title 5

1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
    linenum
  1. LI>" http://www.w3.org/TR/html4/loose.dtd">
  2. Untitled Document
  • 相关文章

文章评论

博客名片

职业:PHP程序员

现居:河南省-洛阳市

博客地址:www.lizongyang.cn

Email:5708837@qq.com

站点信息

  • 建站时间:2019-03-25
  • 网站程序:洛尘博客
  • 联系电话:15888888888
  • 文章统计4084篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们

打赏本站

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~

客服在线

服务时间

周一至周日 9:00-21:00