- 浏览: 21364844 次
- 性别:
- 来自: 杭州
最新评论
-
ZY199266:
配置文件还需要额外的配置ma
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
ZY199266:
我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
lvgaga:
我又一个问题就是 如果像你的这种形式写。配置文件还需要额外的 ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
lvgaga:
我的一访问为什么是 /mavenwebdemo/WEB-I ...
Android 客户端通过内置API(HttpClient) 访问 服务器(用Spring MVC 架构) 返回的json数据全过程 -
y1210251848:
你的那个错误应该是项目所使用的目标框架不支持吧
log4net配置(web中使用log4net,把web.config放在单独的文件中)
编写纯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
- <!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;/*定义所有链接不显示下划线*/}
- .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_*{
- /*定义所有二级类别通用属性*/
- display:block;/*以块显示*/
- color:black;/*文字颜色*/
- padding:0px2px;/*内补丁间隔*/
- }
- /*]]>*/
- </style>
- </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>
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弹出菜单
-
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;/*定义所有链接不显示下划线*/}
- .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;/*内补丁间隔*/
- }
- /*]]>*/
- </style>
- </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>
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 1
level 2
level 3
level 4
4.22.2兼容IE,Opera,Firefox的CSS弹出菜单(脚本实现)的预览
level
level 1
level 2
level 3
level 4
相关推荐
说明: 主要功能就是在线压缩, 解压缩... 这个程序是以 7-zip 的命令行版本为载体, 服务器不需要安装7-zip就可以使用本程序. <br>目前压缩格式支持: 7z, zip. 解压缩格式支持: 7z, zip, gzip, bzip2,...
js prototype 格式化数字 By shawl.qiu
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
ASP 技巧一则之 简化创建关闭记录集对象并创建使用简单的MSSQL存储过程 By shawl.qiu 1. 建造 创建关闭记录集函数 2. 在MSSQL查询分析器中创建简单的MSSQL存储过程 3. 在ASP中应用步骤1,2 shawl.qiu 2006-8-...
By shawl.qiu 摘要: 本文演示了ASP服务端脚本的几个重要应用. 目录: 1. 遍历集合/对象 1.1 VBScript 遍历表单集合 1.2 JScript 遍历表单集合 2. 转变量值为变量, 并赋值 2.1 VBScript 转变量值为变量并...
无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu 压缩包包含: XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1 (带X的是单表, 不带X的是多表.)
广告时间: shawl.qiu C# CMS 系统 预计40天后开始编码, 现在逐步设计中, 免得到时求职说什么什么作品…唉. PS: 今天求职真是惨不忍睹, 谁要招网页相关的请联系 13435580019, 邱先生. 什么地方俺都去, ...
披肩 Shawl是用于将任何程序作为Windows... 使用Windows sc命令进行更多控制: sc create my-app binPath= "C:/path/shawl.exe run -- C:/path/my-app.exe" 然后正常启动或配置服务: sc config my-app start= auto
不建议使用本函数 shawl.qiu 2006-09-06 http://blog.csdn.net/btbtd 主内容: 函数及应用函数随机显示100条记录 linenum 代码如下:<% dim rs, rNum dim temp set rs=createObject(“adodb....
高中英语单词天天记shawl素材
如果文件名与要创建的文件名相同, 则覆盖, 跟 SQL 的更新一样的原理. 待加功能: 删除与查找. 代码如下:<% ”””””””””””””””””””””””””””””””””””” ‘ ‘ ...