欢迎来到福编程网,本站提供各种互联网专业知识!

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

发布时间:2007-03-06 作者: 来源:转载
编写纯CSS弹出菜单的原理及实现Byshawl.qiu摘要:本文介绍了使用CSS编写适用于Opera,Firefox,IE的多风格弹出菜单说明:编写CSS弹出菜单的要点不外乎当鼠标移到目标上时,显示出隐藏的标签.要隐藏的标签使用display:none;属性进行隐藏.触发显示隐藏标签主要使用:h

编写纯CSS弹出菜单的原理及实现Byshawl.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 UntitledDocument /**/

level

level_title
level_title1 level_title2 level_title3 level_title4 level_title5
level1
level_title level_title1 level_title2 level_title3 level_title4 level_title5 level2 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level3 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level4 level_title level_title1 level_title2 level_title3 level_title4 level_title5
1.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)
linenum UntitledDocument /**/ //

level level_title level_title1 level_title2 level_title3 level_title4 level_title5 level1 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level2 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level3 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level4 level_title level_title1 level_title2 level_title3 level_title4 level_title5
2.编写横排底部弹出的CSS菜单.

2.1真正的基于Opera,Firefox纯CSS弹出菜单
linenum UntitledDocument /**/

level level_title level_title1 level_title2 level_title3 level_title4 level_title5 level1 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level2 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level3 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level4 level_title level_title1 level_title2 level_title3 level_title4 level_title5
2.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)
linenum UntitledDocument /**/ //

level level_title level_title1 level_title2 level_title3 level_title4 level_title5 level1 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level2 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level3 level_title level_title1 level_title2 level_title3 level_title4 level_title5 level4 level_title level_title1 level_title2 level_title3 level_title4 level_title5

3.结论
以上例子可以看出,如果已经编写出一个可用的CSS弹出菜单例子,那要编写出弹出位置在其他地方的CSS弹出菜单的话,只须小小修改一下就OK.

4.预览

4.11.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)的预览
level level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 1 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 2 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 3 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 4 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5
4.22.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)的预览
level level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 1 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 2 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 3 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 4 level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5

相关推荐