位置: 编程技术 - 正文

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

编辑：rootadmin
编写纯 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-- 编写直排右侧弹出的 CSS 菜单. 1.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单linenum <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */ body{ margin:0px auto; width:px; /* 定义页面居中显示,*/} *{text-decoration:none!important; /* 定义所有链接不显示下划线 */} .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} .pmVerticalRightOut .level{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */ } .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */ background-color:#FF; /* 背景色 */ color:#FFFFFF; /* 文字颜色 */ } .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */} .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ left:px; /* 相对于一级类别显示的位置 */ width:px; /* 宽度 */ 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:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .pmVerticalRightOut .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /*]]>*/ </style> </head> <body> <p/><p/><p/><p/><p/> <div class="pmVerticalRightOut" id="pmVerticalRightOut"> <div class="level"> <div class="levelTitle">level</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level&id=1">level_ title 1</a> <a href="?cat=level&id=2">level_ title 2</a> <a href="?cat=level&id=3">level_ title 3</a> <a href="?cat=level&id=4">level_ title 4</a> <a href="?cat=level&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 1</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_1&id=1">level_ title 1</a> <a href="?cat=level_1&id=2">level_ title 2</a> <a href="?cat=level_1&id=3">level_ title 3</a> <a href="?cat=level_1&id=4">level_ title 4</a> <a href="?cat=level_1&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 2</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_2&id=1">level_ title 1</a> <a href="?cat=level_2&id=2">level_ title 2</a> <a href="?cat=level_2&id=3">level_ title 3</a> <a href="?cat=level_2&id=4">level_ title 4</a> <a href="?cat=level_2&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 3</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_3&id=1">level_ title 1</a> <a href="?cat=level_3&id=2">level_ title 2</a> <a href="?cat=level_3&id=3">level_ title 3</a> <a href="?cat=level_3&id=4">level_ title 4</a> <a href="?cat=level_3&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 4</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_4&id=1">level_ title 1</a> <a href="?cat=level_4&id=2">level_ title 2</a> <a href="?cat=level_4&id=3">level_ title 3</a> <a href="?cat=level_4&id=4">level_ title 4</a> <a href="?cat=level_4&id=5">level_ title 5</a> </div> </div> </div> </body> </html> 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)linenum <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */ body{ margin:0px auto; width:px; /* 定义页面居中显示,*/} *{text-decoration:none!important; /* 定义所有链接不显示下划线 */} /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/ .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} .pmVerticalRightOut .level{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */ } .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */ background-color:#FF; /* 背景色 */ color:#FFFFFF; /* 文字颜色 */ } .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */} .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ left:px; /* 相对于一级类别显示的位置 */ width:px; /* 宽度 */ 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:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .pmVerticalRightOut .level:hover .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/ /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/ .levelIe{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */ } .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ left:px; /* 相对于一级类别显示的位置 */ width:px; /* 宽度 */ 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:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .levelIe .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/ /*]]>*/ </style> <script type="text/javascript"> //<![CDATA[ if (navigator.appName=="Microsoft Internet Explorer") { function fPmVerticalRightOut() { var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div"); for (var i=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"; } }//css popup menu script by shawl.qiu } } window.onload=fPmVerticalRightOut; } //]]> </script> </head> <body> <p/><p/><p/><p/><p/> <div class="pmVerticalRightOut" id="pmVerticalRightOut"> <div class="level"> <div class="levelTitle">level</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level&id=1">level_ title 1</a> <a href="?cat=level&id=2">level_ title 2</a> <a href="?cat=level&id=3">level_ title 3</a> <a href="?cat=level&id=4">level_ title 4</a> <a href="?cat=level&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 1</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_1&id=1">level_ title 1</a> <a href="?cat=level_1&id=2">level_ title 2</a> <a href="?cat=level_1&id=3">level_ title 3</a> <a href="?cat=level_1&id=4">level_ title 4</a> <a href="?cat=level_1&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 2</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_2&id=1">level_ title 1</a> <a href="?cat=level_2&id=2">level_ title 2</a> <a href="?cat=level_2&id=3">level_ title 3</a> <a href="?cat=level_2&id=4">level_ title 4</a> <a href="?cat=level_2&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 3</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_3&id=1">level_ title 1</a> <a href="?cat=level_3&id=2">level_ title 2</a> <a href="?cat=level_3&id=3">level_ title 3</a> <a href="?cat=level_3&id=4">level_ title 4</a> <a href="?cat=level_3&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 4</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_4&id=1">level_ title 1</a> <a href="?cat=level_4&id=2">level_ title 2</a> <a href="?cat=level_4&id=3">level_ title 3</a> <a href="?cat=level_4&id=4">level_ title 4</a> <a href="?cat=level_4&id=5">level_ title 5</a> </div> </div> </div> </body> </html> 2. 编写横排底部弹出的 CSS 菜单. 2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单linenum <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */ body{ margin:0px auto; width:px; /* 定义页面居中显示,*/} *{text-decoration:none!important; /* 定义所有链接不显示下划线 */} .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} .pmHorizontalBottomOut .level{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */ float:left; } .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */ background-color:#FF; /* 背景色 */ color:#FFFFFF; /* 文字颜色 */ } .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */} .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ width:px; /* 宽度 */ height:auto; /* 高度 */ margin:0px -2px 0px -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:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .pmHorizontalBottomOut .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /*]]>*/ </style> </head> <body> <p/><p/><p/><p/><p/> <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut"> <div class="level"> <div class="levelTitle">level</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level&id=1">level_ title 1</a> <a href="?cat=level&id=2">level_ title 2</a> <a href="?cat=level&id=3">level_ title 3</a> <a href="?cat=level&id=4">level_ title 4</a> <a href="?cat=level&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 1</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_1&id=1">level_ title 1</a> <a href="?cat=level_1&id=2">level_ title 2</a> <a href="?cat=level_1&id=3">level_ title 3</a> <a href="?cat=level_1&id=4">level_ title 4</a> <a href="?cat=level_1&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 2</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_2&id=1">level_ title 1</a> <a href="?cat=level_2&id=2">level_ title 2</a> <a href="?cat=level_2&id=3">level_ title 3</a> <a href="?cat=level_2&id=4">level_ title 4</a> <a href="?cat=level_2&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 3</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_3&id=1">level_ title 1</a> <a href="?cat=level_3&id=2">level_ title 2</a> <a href="?cat=level_3&id=3">level_ title 3</a> <a href="?cat=level_3&id=4">level_ title 4</a> <a href="?cat=level_3&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 4</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_4&id=1">level_ title 1</a> <a href="?cat=level_4&id=2">level_ title 2</a> <a href="?cat=level_4&id=3">level_ title 3</a> <a href="?cat=level_4&id=4">level_ title 4</a> <a href="?cat=level_4&id=5">level_ title 5</a> </div> </div> </div> </body> </html> 2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)linenum <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4. Transitional//EN" " <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */ body{ margin:0px auto; width:px; /* 定义页面居中显示,*/} *{text-decoration:none!important; /* 定义所有链接不显示下划线 */} /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/ .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} .pmHorizontalBottomOut .level{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */ float:left; } .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */ background-color:#FF; /* 背景色 */ color:#FFFFFF; /* 文字颜色 */ } .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */} .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ width:px; /* 宽度 */ height:auto; /* 高度 */ margin:0px -2px 0px -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:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .pmHorizontalBottomOut .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/ /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/ .levelIe{ /* 定义一级类别属性 */ width:px; /* 宽度 */ height:; /* 高度 */ position:relative; /* 显示位置为相对位置 */ display:block; /* 以块模式显示 */ background-color:#D8D8D8; /* 背景色 */ padding:0px 2px; /* 文字内补丁间隔 */ margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */ float:left; } .levelIe { /* 当鼠标划过一级菜单时 */ background-color:#FF; /* 背景色 */ color:#FFFFFF; /* 文字颜色 */ } .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */ display:block; /* 以块显示 */ width:px; /* 宽度 */ height:auto; /* 高度 */ margin:0px -2px 0px -2px; /* 外补丁 */ background-color:#EFEFEF; /* 定义背景色 */ position:absolute; /* 位置为绝对位置 */ } .levelIe .level_ .level_title { /* 定义二级类别标题样式 */ font-weight:bold; /* 字体加粗 */ background-color:#A7ADFE; /* 背景色 */ color:white; /* 文字颜色 */ } .levelIe .level_ a:hover { /* 定义二级类别链接显示样式 */ background-color:#F; /* 背景色 */ color:white; /* 文字颜色 */ } .levelIe .level_ * { /* 定义所有二级类别通用属性 */ display:block; /* 以块显示 */ color:black; /* 文字颜色 */ padding:0px 2px; /* 内补丁间隔 */ } /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/ /*]]>*/ </style> <script type="text/javascript"> //<![CDATA[ if (navigator.appName=="Microsoft Internet Explorer") { function fPmHorizontalBottomOut() { var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div"); for (var i=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"; } }//css popup menu script by shawl.qiu } } window.onload=fPmHorizontalBottomOut; } //]]> </script> </head> <body> <p/><p/><p/><p/><p/> <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut"> <div class="level"> <div class="levelTitle">level</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level&id=1">level_ title 1</a> <a href="?cat=level&id=2">level_ title 2</a> <a href="?cat=level&id=3">level_ title 3</a> <a href="?cat=level&id=4">level_ title 4</a> <a href="?cat=level&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 1</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_1&id=1">level_ title 1</a> <a href="?cat=level_1&id=2">level_ title 2</a> <a href="?cat=level_1&id=3">level_ title 3</a> <a href="?cat=level_1&id=4">level_ title 4</a> <a href="?cat=level_1&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 2</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_2&id=1">level_ title 1</a> <a href="?cat=level_2&id=2">level_ title 2</a> <a href="?cat=level_2&id=3">level_ title 3</a> <a href="?cat=level_2&id=4">level_ title 4</a> <a href="?cat=level_2&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 3</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_3&id=1">level_ title 1</a> <a href="?cat=level_3&id=2">level_ title 2</a> <a href="?cat=level_3&id=3">level_ title 3</a> <a href="?cat=level_3&id=4">level_ title 4</a> <a href="?cat=level_3&id=5">level_ title 5</a> </div> </div> <div class="level"> <div class="levelTitle">level 4</div> <div class="level_"> <div class="level_title">level_ title</div> <a href="?cat=level_4&id=1">level_ title 1</a> <a href="?cat=level_4&id=2">level_ title 2</a> <a href="?cat=level_4&id=3">level_ title 3</a> <a href="?cat=level_4&id=4">level_ title 4</a> <a href="?cat=level_4&id=5">level_ title 5</a> </div> </div> </div> </body> </html> 3. 结论以上例子可以看出, 如果已经编写出一个可用的CSS弹出菜单例子, 那要编写出弹出位置在其他地方的 CSS 弹出菜单的话, 只须小小修改一下就 OK. 4. 预览4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览levellevel_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 1level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 2level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 3level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 4level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 4.2 2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览levellevel_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 1level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 2level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 3level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5 level 4level_ titlelevel_ title 1 level_ title 2 level_ title 3 level_ title 4 level_ title 5

推荐整理分享编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu(css弹出层)，希望有所帮助，仅作参考，欢迎阅读内容。

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

文章相关热门搜索词:css弹出层,编写css页面,div css js实现弹出框,css弹出层,css弹出层,css实现弹出框,css实现弹窗,css实现弹窗,内容如对您有帮助，希望把文章链接给更多的朋友！

DIV+CSS 滑动门技术的简单例子 作者：zishu以下是客齐集网站上应用的一个导航条.这次写的没有直接在STYLE里用ID的形式控制.全部用的CLASS形式;styletype="text/css"#zishuli{float:left;margin-left:5p

给自己的网站制作一个favicon.ico图标的实现方法 ico图标是网站的头像，在打开网站的时候出现在IE的地址栏里，目前大多数浏览器都支持，最常用的IE6.0则显示加入本地收藏夹网站的ICO图像：绝大多数

%点击区的滑动门代码第1/2页 BLOG地址：

标签: css弹出层

本文链接地址:https://www.jiuchutong.com/biancheng/371945.html 转载请保留说明！

上一篇：制作WEB在线编辑器-插入HTML标签(web在线编辑excel)

下一篇：DIV+CSS 滑动门技术的简单例子(css滑动门技术的步骤)

  • PHP:pg_result_error_field()的用法_PostgreSQL函数

    PHP:pg_result_error_field()的用法_PostgreSQL函数

  • PHP:jdtounix()的用法_日历函数(php的js)

    PHP:jdtounix()的用法_日历函数(php的js)

  • 设置VMWare虚拟机以及网络开关批处理(vmware workstation虚拟机设置)

    设置VMWare虚拟机以及网络开关批处理(vmware workstation虚拟机设置)

  • Win10预览版10565发布两枚更新补丁 包括IE Flash播放器安全补丁(Win10预览版怎么变回正式版)

    Win10预览版10565发布两枚更新补丁 包括IE Flash播放器安全补丁(Win10预览版怎么变回正式版)

  • linux中yum update被占用(Another app is currently holding the yum lock)的解决办法(linux updatedb)

    linux中yum update被占用(Another app is currently holding the yum lock)的解决办法(linux updatedb)

  • lxdboxcp.exe是什么进程 有什么用 lxdboxcp进程查询(xwizard.exe是什么)

    lxdboxcp.exe是什么进程 有什么用 lxdboxcp进程查询(xwizard.exe是什么)

  • 【Cocos2d-x Lua笔记四】Quick-Cocos2d-x(cocos2dx官方教程)

    【Cocos2d-x Lua笔记四】Quick-Cocos2d-x(cocos2dx官方教程)

  • Android环境搭建以及HelloWorld程序(安卓运行环境搭建)

    Android环境搭建以及HelloWorld程序(安卓运行环境搭建)

  • python图像常规操作(用python进行图像处理)

    python图像常规操作(用python进行图像处理)

  • 混合销售行为的基本特征不包括
  • 公对公转账在手机上怎么操作
  • 研发支出月末结转转去哪里?
  • 打印机费用是属于管理费用吗
  • 税收分类编码不可用是什么原因
  • 发票查询校验码看不清怎么办
  • 业务招待费扣除计算
  • 城镇土地使用税暂行条例
  • 坏账确认无法收回的会计分录
  • 酒店代金券使用规则
  • 工程收到收据没有发票的会计分录怎么做?
  • 企业个人补偿款需要缴税吗？
  • 不属于抵扣范围的是什么
  • 一般纳税人开技术服务发票
  • 行邮税的税率档次
  • 税收名词汇编
  • 计提工资怎么做账务处理
  • 有形动产经营租赁服务税率
  • 公积金贷款利息现在是多少
  • 溢价转让股权的会计处理
  • 主营业务收入需要交增值税吗
  • 电脑休眠和睡眠什么差别
  • 委托检验报告能否作为处罚依据
  • 去年的成本如何调整
  • 资源管理器被关闭了怎么恢复
  • php ord
  • macOS Catalina10.15.4值得升级吗 macOS Catalina10.15.4更新了什么
  • PHP:apache_child_terminate()的用法_Apache函数
  • PHP:Memcached::addByKey()的用法_Memcached类
  • 微软的机会
  • 费用超额怎么写申请
  • 一亩地是多少平方?
  • CodeIgniter连贯操作的底层原理分析
  • 坏账准备会计科目使用说明
  • uniapp跳转页面没反应
  • php中自定义函数的语法格式
  • 人工智能机器人保姆什么时候实现
  • docker运行多个镜像
  • 520要来了要吵架的赶紧
  • 前端实战培训
  • flip函数
  • 支付银行贷款利息现金流量表填哪里
  • python copyto
  • sql动态执行
  • sqlserver2005 master与msdb数据库备份恢复过程
  • 哪种发票可以报税
  • 同一控制下长期股权投资的入账价值
  • 取得虚开增值税专用发票罪量刑标准
  • 增值税发票打印机怎么调整打印位置
  • 开出商业承兑汇票怎么做分录
  • 房租增值税专票税点
  • 跨年成本少结转如何调整
  • 扣除土地价款
  • 企业大额融资需要什么资料
  • 百旺金赋税盘怎么清卡
  • 变卖固定资产怎么交税
  • 如何制作会计账簿
  • sqlserver获取数据库名
  • debian系统教程
  • 开机时显示
  • windows附件在哪里打开
  • linux命令i
  • CentOS 5.4+OpenVZ+Vtonf打造VPS服务器的方法
  • centos6.10安装教程
  • window8更新10
  • 怎么降到windows7
  • win8.1界面如何改为win7
  • win7系统如何给文件夹加密
  • 常见错误类型
  • 关于月亮的诗句
  • javascript有哪些类型
  • Android游戏开发实践指南
  • python中随机数的用法
  • vue组件生命周期执行顺序
  • 详解js的异步编码
  • js数组操作方法
  • jquery设置内容
  • 中国体育体制改革的特点
  • 2021辽宁粮食直补
  • 企业不做审计会有什么后果？
    • 免责声明：网站部分图片文字素材来源于网络，如有侵权，请及时告知，我们会第一时间删除，谢谢！ 邮箱：opceo@qq.com

    鄂ICP备2023003026号

    网站地图： 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接： 武汉网站建设