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

摘要：编写纯CSS弹出菜单的原理及实现Byshawl.qiu摘要:本文介绍了使用CSS编写适用于Opera,Firefox,IE的多风格弹出菜单说...

编写纯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弹出菜单

1.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)

linenum <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>UntitledDocument</title> <styletype="text/css"> /*<![CDATA[*//*shawl.qiupurecsspopupmenudemo*/ body{margin:0pxauto;width:768px;/*定义页面居中显示,*/} *{text-decoration:none!important;/*定义所有链接不显示下划线*/} /*-------------------start针对Opera,Firefox的CSS弹出菜单-------------------*/ .pmVerticalRightOut{background-color:#fff!important;/*定义主菜单域背景色*/} .pmVerticalRightOut.level{/*定义一级类别属性*/ width:120px;/*宽度*/ height:17;/*高度*/ position:relative;/*显示位置为相对位置*/ display:block;/*以块模式显示*/ background-color:#D8D8D8;/*背景色*/ padding:0px2px;/*文字内补丁间隔*/ margin:0px0px1px0px;/*菜单外补丁间隔*/ } .pmVerticalRightOut.level:hover{/*当鼠标划过一级菜单时*/ background-color:#6633FF;/*背景色*/ color:#FFFFFF;/*文字颜色*/ } .pmVerticalRightOut.level_{display:none;/*默认隐藏二级类别*/} .pmVerticalRightOut.level:hover.level_{/*鼠标划过时触发显示二级类别*/ display:block;/*以块显示*/ left:124px;/*相对于一级类别显示的位置*/ width:120px;/*宽度*/ height:auto;/*高度*/ top:0px;/*相对于一级类别所在位置的顶端*/ background-color:#EFEFEF;/*定义背景色*/ position:absolute;/*位置为绝对位置*/ } .pmVerticalRightOut.level:hover.level_.level_title{ /*定义二级类别标题样式*/ font-weight:bold;/*字体加粗*/ background-color:#A7ADFE;/*背景色*/ color:white;/*文字颜色*/ } .pmVerticalRightOut.level:hover.level_a:hover{ /*定义二级类别链接显示样式*/ background-color:#F83658;/*背景色*/ color:white;/*文字颜色*/ } .pmVerticalRightOut.level:hover.level_*{ /*定义所有二级类别通用属性*/ display:block;/*以块显示*/ color:black;/*文字颜色*/ padding:0px2px;/*内补丁间隔*/ } /*-------------------end针对Opera,Firefox的CSS弹出菜单-------------------*/ /*-------------------start针对IE的CSS弹出菜单-------------------*/ .levelIe{/*定义一级类别属性*/ width:120px;/*宽度*/ height:17;/*高度*/ position:relative;/*显示位置为相对位置*/ display:block;/*以块模式显示*/ background-color:#D8D8D8;/*背景色*/ padding:0px2px;/*文字内补丁间隔*/ margin:0px0px1px0px;/*菜单外补丁间隔*/ } .levelIe.level_{/*鼠标划过时触发显示二级类别*/ display:block;/*以块显示*/ left:124px;/*相对于一级类别显示的位置*/ width:120px;/*宽度*/ height:auto;/*高度*/ top:0px;/*相对于一级类别所在位置的顶端*/ background-color:#EFEFEF;/*定义背景色*/ position:absolute;/*位置为绝对位置*/ } .levelIe.level_.level_title{ /*定义二级类别标题样式*/ font-weight:bold;/*字体加粗*/ background-color:#A7ADFE;/*背景色*/ color:white;/*文字颜色*/ } .levelIe.level_a:hover{ /*定义二级类别链接显示样式*/ background-color:#F83658;/*背景色*/ color:white;/*文字颜色*/ } .levelIe.level_*{ /*定义所有二级类别通用属性*/ display:block;/*以块显示*/ color:black;/*文字颜色*/ padding:0px2px;/*内补丁间隔*/ } /*-------------------end针对IE的CSS弹出菜单-------------------*/ /*]]>*/ </style> <scripttype="text/javascript"> //<![CDATA[ if(navigator.appName=="MicrosoftInternetExplorer"){ functionfPmVerticalRightOut(){ vargetItem=document.getElementById("pmVerticalRightOut").getElementsByTagName("div"); for(vari=0;i<getItem.length;i++){ getItem[i].onmouseover=function(){ if(this.className=="level"){ this.className="levelIe"; } } getItem[i].onmouseout=function(){ if(this.className=="levelIe"){ this.className="level"; } }//csspopupmenuscriptbyshawl.qiu } } window.onload=fPmVerticalRightOut; } //]]> </script> </head> <body> <p/><p/><p/><p/><p/> <divclass="pmVerticalRightOut"id="pmVerticalRightOut"> <divclass="level"> <divclass="levelTitle">level</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level&id=1">level_title1</a> <ahref="?cat=level&id=2">level_title2</a> <ahref="?cat=level&id=3">level_title3</a> <ahref="?cat=level&id=4">level_title4</a> <ahref="?cat=level&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level1</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_1&id=1">level_title1</a> <ahref="?cat=level_1&id=2">level_title2</a> <ahref="?cat=level_1&id=3">level_title3</a> <ahref="?cat=level_1&id=4">level_title4</a> <ahref="?cat=level_1&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level2</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_2&id=1">level_title1</a> <ahref="?cat=level_2&id=2">level_title2</a> <ahref="?cat=level_2&id=3">level_title3</a> <ahref="?cat=level_2&id=4">level_title4</a> <ahref="?cat=level_2&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level3</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_3&id=1">level_title1</a> <ahref="?cat=level_3&id=2">level_title2</a> <ahref="?cat=level_3&id=3">level_title3</a> <ahref="?cat=level_3&id=4">level_title4</a> <ahref="?cat=level_3&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level4</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_4&id=1">level_title1</a> <ahref="?cat=level_4&id=2">level_title2</a> <ahref="?cat=level_4&id=3">level_title3</a> <ahref="?cat=level_4&id=4">level_title4</a> <ahref="?cat=level_4&id=5">level_title5</a> </div> </div> </div> </body> </html>

2.编写横排底部弹出的CSS菜单.

2.1真正的基于Opera,Firefox纯CSS弹出菜单

2.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)

linenum <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> <title>UntitledDocument</title> <styletype="text/css"> /*<![CDATA[*//*shawl.qiupurecsspopupmenudemo*/ body{margin:0pxauto;width:768px;/*定义页面居中显示,*/} *{text-decoration:none!important;/*定义所有链接不显示下划线*/} /*-------------------start针对Opera,Firefox的CSS弹出菜单-------------------*/ .pmHorizontalBottomOut{background-color:#fff!important;/*定义主菜单域背景色*/} .pmHorizontalBottomOut.level{/*定义一级类别属性*/ width:120px;/*宽度*/ height:17;/*高度*/ position:relative;/*显示位置为相对位置*/ display:block;/*以块模式显示*/ background-color:#D8D8D8;/*背景色*/ padding:0px2px;/*文字内补丁间隔*/ margin:0px1px0px0px;/*菜单外补丁间隔*/ float:left; } .pmHorizontalBottomOut.level:hover{/*当鼠标划过一级菜单时*/ background-color:#6633FF;/*背景色*/ color:#FFFFFF;/*文字颜色*/ } .pmHorizontalBottomOut.level_{display:none;/*默认隐藏二级类别*/} .pmHorizontalBottomOut.level:hover.level_{/*鼠标划过时触发显示二级类别*/ display:block;/*以块显示*/ width:124px;/*宽度*/ height:auto;/*高度*/ margin:0px-2px0px-2px;/*外补丁*/ background-color:#EFEFEF;/*定义背景色*/ position:absolute;/*位置为绝对位置*/ } .pmHorizontalBottomOut.level:hover.level_.level_title{ /*定义二级类别标题样式*/ font-weight:bold;/*字体加粗*/ background-color:#A7ADFE;/*背景色*/ color:white;/*文字颜色*/ } .pmHorizontalBottomOut.level:hover.level_a:hover{ /*定义二级类别链接显示样式*/ background-color:#F83658;/*背景色*/ color:white;/*文字颜色*/ } .pmHorizontalBottomOut.level_*{ /*定义所有二级类别通用属性*/ display:block;/*以块显示*/ color:black;/*文字颜色*/ padding:0px2px;/*内补丁间隔*/ } /*-------------------end针对Opera,Firefox的CSS弹出菜单-------------------*/ /*-------------------start针对IE的CSS弹出菜单-------------------*/ .levelIe{/*定义一级类别属性*/ width:120px;/*宽度*/ height:17;/*高度*/ position:relative;/*显示位置为相对位置*/ display:block;/*以块模式显示*/ background-color:#D8D8D8;/*背景色*/ padding:0px2px;/*文字内补丁间隔*/ margin:0px1px0px0px;/*菜单外补丁间隔*/ float:left; } .levelIe{/*当鼠标划过一级菜单时*/ background-color:#6633FF;/*背景色*/ color:#FFFFFF;/*文字颜色*/ } .levelIe.level_{/*鼠标划过时触发显示二级类别*/ display:block;/*以块显示*/ width:124px;/*宽度*/ height:auto;/*高度*/ margin:0px-2px0px-2px;/*外补丁*/ background-color:#EFEFEF;/*定义背景色*/ position:absolute;/*位置为绝对位置*/ } .levelIe.level_.level_title{ /*定义二级类别标题样式*/ font-weight:bold;/*字体加粗*/ background-color:#A7ADFE;/*背景色*/ color:white;/*文字颜色*/ } .levelIe.level_a:hover{ /*定义二级类别链接显示样式*/ background-color:#F83658;/*背景色*/ color:white;/*文字颜色*/ } .levelIe.level_*{ /*定义所有二级类别通用属性*/ display:block;/*以块显示*/ color:black;/*文字颜色*/ padding:0px2px;/*内补丁间隔*/ } /*-------------------end针对IE的CSS弹出菜单-------------------*/ /*]]>*/ </style> <scripttype="text/javascript"> //<![CDATA[ if(navigator.appName=="MicrosoftInternetExplorer"){ functionfPmHorizontalBottomOut(){ vargetItem=document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div"); for(vari=0;i<getItem.length;i++){ getItem[i].onmouseover=function(){ if(this.className=="level"){ this.className="levelIe"; } } getItem[i].onmouseout=function(){ if(this.className=="levelIe"){ this.className="level"; } }//csspopupmenuscriptbyshawl.qiu } } window.onload=fPmHorizontalBottomOut; } //]]> </script> </head> <body> <p/><p/><p/><p/><p/> <divclass="pmHorizontalBottomOut"id="pmHorizontalBottomOut"> <divclass="level"> <divclass="levelTitle">level</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level&id=1">level_title1</a> <ahref="?cat=level&id=2">level_title2</a> <ahref="?cat=level&id=3">level_title3</a> <ahref="?cat=level&id=4">level_title4</a> <ahref="?cat=level&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level1</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_1&id=1">level_title1</a> <ahref="?cat=level_1&id=2">level_title2</a> <ahref="?cat=level_1&id=3">level_title3</a> <ahref="?cat=level_1&id=4">level_title4</a> <ahref="?cat=level_1&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level2</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_2&id=1">level_title1</a> <ahref="?cat=level_2&id=2">level_title2</a> <ahref="?cat=level_2&id=3">level_title3</a> <ahref="?cat=level_2&id=4">level_title4</a> <ahref="?cat=level_2&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level3</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_3&id=1">level_title1</a> <ahref="?cat=level_3&id=2">level_title2</a> <ahref="?cat=level_3&id=3">level_title3</a> <ahref="?cat=level_3&id=4">level_title4</a> <ahref="?cat=level_3&id=5">level_title5</a> </div> </div> <divclass="level"> <divclass="levelTitle">level4</div> <divclass="level_"> <divclass="level_title">level_title</div> <ahref="?cat=level_4&id=1">level_title1</a> <ahref="?cat=level_4&id=2">level_title2</a> <ahref="?cat=level_4&id=3">level_title3</a> <ahref="?cat=level_4&id=4">level_title4</a> <ahref="?cat=level_4&id=5">level_title5</a> </div> </div> </div> </body> </html>

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