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

最新推荐文章于 2022-10-14 00:51:01 发布
最新推荐文章于 2022-10-14 00:51:01 发布
阅读量1k 收藏
点赞数
分类专栏： ASP.NET 文章标签： css firefox opera function 脚本 ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanweiwei/article/details/1329667
版权

编写纯 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 弹出菜单
  1. linenum
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. " http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  10.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  11.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  12.     .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  13.     .pmVerticalRightOut .level{  /* 定义一级类别属性 */
  14.         width:120px; /* 宽度 */
  15.         height:17; /* 高度 */
  16.         position:relative; /* 显示位置为相对位置 */
  17.         display:block; /* 以块模式显示 */
  18.         background-color:#D8D8D8; /* 背景色 */
  19.         padding:0px 2px; /* 文字内补丁间隔 */
  20.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  21.     }
  22.     .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */
  23.         background-color:#6633FF; /* 背景色 */
  24.         color:#FFFFFF; /* 文字颜色 */
  25.     }
  26.     .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */}
  27.     
  28.     .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  29.         display:block; /* 以块显示 */
  30.         left:124px; /* 相对于一级类别显示的位置 */
  31.         width:120px; /* 宽度 */
  32.         height:auto; /* 高度 */
  33.         top:0px; /* 相对于一级类别所在位置的顶端 */
  34.         background-color:#EFEFEF; /* 定义背景色 */
  35.         position:absolute; /* 位置为绝对位置 */
  36.     }
  37.     .pmVerticalRightOut .level:hover .level_ .level_title {
  38.         /* 定义二级类别标题样式 */
  39.         font-weight:bold; /* 字体加粗 */
  40.         background-color:#A7ADFE; /* 背景色 */
  41.         color:white; /* 文字颜色 */
  42.     }
  43.     .pmVerticalRightOut .level:hover .level_ a:hover {
  44.         /* 定义二级类别链接显示样式 */
  45.         background-color:#F83658; /* 背景色 */
  46.         color:white; /* 文字颜色 */
  47.     }
  48.     .pmVerticalRightOut .level_ * { 
  49.         /* 定义所有二级类别通用属性 */
  50.         display:block; /* 以块显示 */
  51.         color:black; /* 文字颜色 */
  52.         padding:0px 2px; /* 内补丁间隔 */
  53.     }
  54. /*]]>*/
  55. </style>
  56. </head>
  57. <body>
  58. <p/><p/><p/><p/><p/>
  59. <div class="pmVerticalRightOut" id="pmVerticalRightOut">
  60.     <div class="level">
  61.         <div class="levelTitle">level</div>
  62.         <div class="level_">
  63.             <div class="level_title">level_ title</div>
  64.             <a href="?cat=level&id=1">level_ title 1</a>
  65.             <a href="?cat=level&id=2">level_ title 2</a>
  66.             <a href="?cat=level&id=3">level_ title 3</a>
  67.             <a href="?cat=level&id=4">level_ title 4</a>
  68.             <a href="?cat=level&id=5">level_ title 5</a>
  69.         </div>
  70.     </div>
  71.     <div class="level">
  72.         <div class="levelTitle">level 1</div>
  73.         <div class="level_">
  74.             <div class="level_title">level_ title</div>
  75.             <a href="?cat=level_1&id=1">level_ title 1</a>
  76.             <a href="?cat=level_1&id=2">level_ title 2</a>
  77.             <a href="?cat=level_1&id=3">level_ title 3</a>
  78.             <a href="?cat=level_1&id=4">level_ title 4</a>
  79.             <a href="?cat=level_1&id=5">level_ title 5</a>
  80.         </div>
  81.     </div>
  82.     <div class="level">
  83.         <div class="levelTitle">level 2</div>
  84.         <div class="level_">
  85.             <div class="level_title">level_ title</div>
  86.             <a href="?cat=level_2&id=1">level_ title 1</a>
  87.             <a href="?cat=level_2&id=2">level_ title 2</a>
  88.             <a href="?cat=level_2&id=3">level_ title 3</a>
  89.             <a href="?cat=level_2&id=4">level_ title 4</a>
  90.             <a href="?cat=level_2&id=5">level_ title 5</a>
  91.         </div>
  92.     </div>
  93.     <div class="level">
  94.         <div class="levelTitle">level 3</div>
  95.         <div class="level_">
  96.             <div class="level_title">level_ title</div>
  97.             <a href="?cat=level_3&id=1">level_ title 1</a>
  98.             <a href="?cat=level_3&id=2">level_ title 2</a>
  99.             <a href="?cat=level_3&id=3">level_ title 3</a>
  100.             <a href="?cat=level_3&id=4">level_ title 4</a>
  101.             <a href="?cat=level_3&id=5">level_ title 5</a>
  102.         </div>
  103.     </div>
  104.     <div class="level">
  105.         <div class="levelTitle">level 4</div>
  106.         <div class="level_">
  107.             <div class="level_title">level_ title</div>
  108.             <a href="?cat=level_4&id=1">level_ title 1</a>
  109.             <a href="?cat=level_4&id=2">level_ title 2</a>
  110.             <a href="?cat=level_4&id=3">level_ title 3</a>
  111.             <a href="?cat=level_4&id=4">level_ title 4</a>
  112.             <a href="?cat=level_4&id=5">level_ title 5</a>
  113.         </div>
  114.     </div>
  115. </div>
  116. </body>
  117. </html>

1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
  1. linenum
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. " http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  10.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  11.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  12.     /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  13.     .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  14.     .pmVerticalRightOut .level{  /* 定义一级类别属性 */
  15.         width:120px; /* 宽度 */
  16.         height:17; /* 高度 */
  17.         position:relative; /* 显示位置为相对位置 */
  18.         display:block; /* 以块模式显示 */
  19.         background-color:#D8D8D8; /* 背景色 */
  20.         padding:0px 2px; /* 文字内补丁间隔 */
  21.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  22.     }
  23.     .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */
  24.         background-color:#6633FF; /* 背景色 */
  25.         color:#FFFFFF; /* 文字颜色 */
  26.     }
  27.     .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */}
  28.     
  29.     .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  30.         display:block; /* 以块显示 */
  31.         left:124px; /* 相对于一级类别显示的位置 */
  32.         width:120px; /* 宽度 */
  33.         height:auto; /* 高度 */
  34.         top:0px; /* 相对于一级类别所在位置的顶端 */
  35.         background-color:#EFEFEF; /* 定义背景色 */
  36.         position:absolute; /* 位置为绝对位置 */
  37.     }
  38.     .pmVerticalRightOut .level:hover .level_ .level_title {
  39.         /* 定义二级类别标题样式 */
  40.         font-weight:bold; /* 字体加粗 */
  41.         background-color:#A7ADFE; /* 背景色 */
  42.         color:white; /* 文字颜色 */
  43.     }
  44.     .pmVerticalRightOut .level:hover .level_ a:hover {
  45.         /* 定义二级类别链接显示样式 */
  46.         background-color:#F83658; /* 背景色 */
  47.         color:white; /* 文字颜色 */
  48.     }
  49.     .pmVerticalRightOut .level:hover .level_ * { 
  50.         /* 定义所有二级类别通用属性 */
  51.         display:block; /* 以块显示 */
  52.         color:black; /* 文字颜色 */
  53.         padding:0px 2px; /* 内补丁间隔 */
  54.     }
  55.     /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  56.     
  57.     /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/
  58.     .levelIe{  /* 定义一级类别属性 */
  59.         width:120px; /* 宽度 */
  60.         height:17; /* 高度 */
  61.         position:relative; /* 显示位置为相对位置 */
  62.         display:block; /* 以块模式显示 */
  63.         background-color:#D8D8D8; /* 背景色 */
  64.         padding:0px 2px; /* 文字内补丁间隔 */
  65.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
  66.     }
  67.     .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */
  68.         display:block; /* 以块显示 */
  69.         left:124px; /* 相对于一级类别显示的位置 */
  70.         width:120px; /* 宽度 */
  71.         height:auto; /* 高度 */
  72.         top:0px; /* 相对于一级类别所在位置的顶端 */
  73.         background-color:#EFEFEF; /* 定义背景色 */
  74.         position:absolute; /* 位置为绝对位置 */
  75.     }
  76.     .levelIe .level_ .level_title {
  77.         /* 定义二级类别标题样式 */
  78.         font-weight:bold; /* 字体加粗 */
  79.         background-color:#A7ADFE; /* 背景色 */
  80.         color:white; /* 文字颜色 */
  81.     }
  82.     .levelIe .level_ a:hover {
  83.         /* 定义二级类别链接显示样式 */
  84.         background-color:#F83658; /* 背景色 */
  85.         color:white; /* 文字颜色 */
  86.     }
  87.     .levelIe .level_ * { 
  88.         /* 定义所有二级类别通用属性 */
  89.         display:block; /* 以块显示 */
  90.         color:black; /* 文字颜色 */
  91.         padding:0px 2px; /* 内补丁间隔 */
  92.     }
  93.     /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/
  94. /*]]>*/
  95. </style>
  96. <script type="text/javascript">
  97. //<![CDATA[
  98. if (navigator.appName=="Microsoft Internet Explorer") {
  99.     function fPmVerticalRightOut() {
  100.         var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div");
  101.         for (var i=0; i<getItem.length; i++) {
  102.             getItem[i].οnmοuseοver=function() { 
  103.                 if(    this.className=="level"){
  104.                     this.className="levelIe";
  105.                 }
  106.             }
  107.             getItem[i].οnmοuseοut=function() { 
  108.                 if(    this.className=="levelIe"){
  109.                     this.className="level";
  110.                 }
  111.             }//css popup menu script by shawl.qiu
  112.         }
  113.     }
  114.     window.οnlοad=fPmVerticalRightOut;
  115. }
  116. //]]>
  117. </script>
  118. </head>
  119. <body>
  120. <p/><p/><p/><p/><p/>
  121. <div class="pmVerticalRightOut" id="pmVerticalRightOut">
  122.     <div class="level">
  123.         <div class="levelTitle">level</div>
  124.         <div class="level_">
  125.             <div class="level_title">level_ title</div>
  126.             <a href="?cat=level&id=1">level_ title 1</a>
  127.             <a href="?cat=level&id=2">level_ title 2</a>
  128.             <a href="?cat=level&id=3">level_ title 3</a>
  129.             <a href="?cat=level&id=4">level_ title 4</a>
  130.             <a href="?cat=level&id=5">level_ title 5</a>
  131.         </div>
  132.     </div>
  133.     <div class="level">
  134.         <div class="levelTitle">level 1</div>
  135.         <div class="level_">
  136.             <div class="level_title">level_ title</div>
  137.             <a href="?cat=level_1&id=1">level_ title 1</a>
  138.             <a href="?cat=level_1&id=2">level_ title 2</a>
  139.             <a href="?cat=level_1&id=3">level_ title 3</a>
  140.             <a href="?cat=level_1&id=4">level_ title 4</a>
  141.             <a href="?cat=level_1&id=5">level_ title 5</a>
  142.         </div>
  143.     </div>
  144.     <div class="level">
  145.         <div class="levelTitle">level 2</div>
  146.         <div class="level_">
  147.             <div class="level_title">level_ title</div>
  148.             <a href="?cat=level_2&id=1">level_ title 1</a>
  149.             <a href="?cat=level_2&id=2">level_ title 2</a>
  150.             <a href="?cat=level_2&id=3">level_ title 3</a>
  151.             <a href="?cat=level_2&id=4">level_ title 4</a>
  152.             <a href="?cat=level_2&id=5">level_ title 5</a>
  153.         </div>
  154.     </div>
  155.     <div class="level">
  156.         <div class="levelTitle">level 3</div>
  157.         <div class="level_">
  158.             <div class="level_title">level_ title</div>
  159.             <a href="?cat=level_3&id=1">level_ title 1</a>
  160.             <a href="?cat=level_3&id=2">level_ title 2</a>
  161.             <a href="?cat=level_3&id=3">level_ title 3</a>
  162.             <a href="?cat=level_3&id=4">level_ title 4</a>
  163.             <a href="?cat=level_3&id=5">level_ title 5</a>
  164.         </div>
  165.     </div>
  166.     <div class="level">
  167.         <div class="levelTitle">level 4</div>
  168.         <div class="level_">
  169.             <div class="level_title">level_ title</div>
  170.             <a href="?cat=level_4&id=1">level_ title 1</a>
  171.             <a href="?cat=level_4&id=2">level_ title 2</a>
  172.             <a href="?cat=level_4&id=3">level_ title 3</a>
  173.             <a href="?cat=level_4&id=4">level_ title 4</a>
  174.             <a href="?cat=level_4&id=5">level_ title 5</a>
  175.         </div>
  176.     </div>
  177. </div>
  178. </body>
  179. </html>

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

2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
  1. linenum
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. " http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  10.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  11.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  12.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  13.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
  14.         width:120px; /* 宽度 */
  15.         height:17; /* 高度 */
  16.         position:relative; /* 显示位置为相对位置 */
  17.         display:block; /* 以块模式显示 */
  18.         background-color:#D8D8D8; /* 背景色 */
  19.         padding:0px 2px; /* 文字内补丁间隔 */
  20.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  21.         float:left;
  22.     }
  23.     .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */
  24.         background-color:#6633FF; /* 背景色 */
  25.         color:#FFFFFF; /* 文字颜色 */
  26.     }
  27.     .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */}
  28.     
  29.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  30.         display:block; /* 以块显示 */
  31.         width:124px; /* 宽度 */
  32.         height:auto; /* 高度 */
  33.         margin:0px -2px 0px -2px; /* 外补丁 */
  34.         background-color:#EFEFEF; /* 定义背景色 */
  35.         position:absolute; /* 位置为绝对位置 */
  36.     }
  37.     .pmHorizontalBottomOut .level:hover .level_ .level_title {
  38.         /* 定义二级类别标题样式 */
  39.         font-weight:bold; /* 字体加粗 */
  40.         background-color:#A7ADFE; /* 背景色 */
  41.         color:white; /* 文字颜色 */
  42.     }
  43.     .pmHorizontalBottomOut .level:hover .level_ a:hover {
  44.         /* 定义二级类别链接显示样式 */
  45.         background-color:#F83658; /* 背景色 */
  46.         color:white; /* 文字颜色 */
  47.     }
  48.     .pmHorizontalBottomOut .level_ * { 
  49.         /* 定义所有二级类别通用属性 */
  50.         display:block; /* 以块显示 */
  51.         color:black; /* 文字颜色 */
  52.         padding:0px 2px; /* 内补丁间隔 */
  53.     }
  54. /*]]>*/
  55. </style>
  56. </head>
  57. <body>
  58. <p/><p/><p/><p/><p/>
  59. <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
  60.     <div class="level">
  61.         <div class="levelTitle">level</div>
  62.         <div class="level_">
  63.             <div class="level_title">level_ title</div>
  64.             <a href="?cat=level&id=1">level_ title 1</a>
  65.             <a href="?cat=level&id=2">level_ title 2</a>
  66.             <a href="?cat=level&id=3">level_ title 3</a>
  67.             <a href="?cat=level&id=4">level_ title 4</a>
  68.             <a href="?cat=level&id=5">level_ title 5</a>
  69.         </div>
  70.     </div>
  71.     <div class="level">
  72.         <div class="levelTitle">level 1</div>
  73.         <div class="level_">
  74.             <div class="level_title">level_ title</div>
  75.             <a href="?cat=level_1&id=1">level_ title 1</a>
  76.             <a href="?cat=level_1&id=2">level_ title 2</a>
  77.             <a href="?cat=level_1&id=3">level_ title 3</a>
  78.             <a href="?cat=level_1&id=4">level_ title 4</a>
  79.             <a href="?cat=level_1&id=5">level_ title 5</a>
  80.         </div>
  81.     </div>
  82.     <div class="level">
  83.         <div class="levelTitle">level 2</div>
  84.         <div class="level_">
  85.             <div class="level_title">level_ title</div>
  86.             <a href="?cat=level_2&id=1">level_ title 1</a>
  87.             <a href="?cat=level_2&id=2">level_ title 2</a>
  88.             <a href="?cat=level_2&id=3">level_ title 3</a>
  89.             <a href="?cat=level_2&id=4">level_ title 4</a>
  90.             <a href="?cat=level_2&id=5">level_ title 5</a>
  91.         </div>
  92.     </div>
  93.     <div class="level">
  94.         <div class="levelTitle">level 3</div>
  95.         <div class="level_">
  96.             <div class="level_title">level_ title</div>
  97.             <a href="?cat=level_3&id=1">level_ title 1</a>
  98.             <a href="?cat=level_3&id=2">level_ title 2</a>
  99.             <a href="?cat=level_3&id=3">level_ title 3</a>
  100.             <a href="?cat=level_3&id=4">level_ title 4</a>
  101.             <a href="?cat=level_3&id=5">level_ title 5</a>
  102.         </div>
  103.     </div>
  104.     <div class="level">
  105.         <div class="levelTitle">level 4</div>
  106.         <div class="level_">
  107.             <div class="level_title">level_ title</div>
  108.             <a href="?cat=level_4&id=1">level_ title 1</a>
  109.             <a href="?cat=level_4&id=2">level_ title 2</a>
  110.             <a href="?cat=level_4&id=3">level_ title 3</a>
  111.             <a href="?cat=level_4&id=4">level_ title 4</a>
  112.             <a href="?cat=level_4&id=5">level_ title 5</a>
  113.         </div>
  114.     </div>
  115. </div>
  116. </body>
  117. </html>

2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
  1. linenum
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  3. " http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Untitled Document</title>
  8. <style type="text/css">
  9. /*<![CDATA[*/ /* shawl.qiu pure css popup menu demo */
  10.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
  11.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
  12.     /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  13.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
  14.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
  15.         width:120px; /* 宽度 */
  16.         height:17; /* 高度 */
  17.         position:relative; /* 显示位置为相对位置 */
  18.         display:block; /* 以块模式显示 */
  19.         background-color:#D8D8D8; /* 背景色 */
  20.         padding:0px 2px; /* 文字内补丁间隔 */
  21.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  22.         float:left;
  23.     }
  24.     .pmHorizontalBottomOut .level:hover { /* 当鼠标划过一级菜单时 */
  25.         background-color:#6633FF; /* 背景色 */
  26.         color:#FFFFFF; /* 文字颜色 */
  27.     }
  28.     .pmHorizontalBottomOut .level_{display:none; /* 默认隐藏二级类别 */}
  29.     
  30.     .pmHorizontalBottomOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
  31.         display:block; /* 以块显示 */
  32.         width:124px; /* 宽度 */
  33.         height:auto; /* 高度 */
  34.         margin:0px -2px 0px -2px; /* 外补丁 */
  35.         background-color:#EFEFEF; /* 定义背景色 */
  36.         position:absolute; /* 位置为绝对位置 */
  37.     }
  38.     .pmHorizontalBottomOut .level:hover .level_ .level_title {
  39.         /* 定义二级类别标题样式 */
  40.         font-weight:bold; /* 字体加粗 */
  41.         background-color:#A7ADFE; /* 背景色 */
  42.         color:white; /* 文字颜色 */
  43.     }
  44.     .pmHorizontalBottomOut .level:hover .level_ a:hover {
  45.         /* 定义二级类别链接显示样式 */
  46.         background-color:#F83658; /* 背景色 */
  47.         color:white; /* 文字颜色 */
  48.     }
  49.     .pmHorizontalBottomOut .level_ * { 
  50.         /* 定义所有二级类别通用属性 */
  51.         display:block; /* 以块显示 */
  52.         color:black; /* 文字颜色 */
  53.         padding:0px 2px; /* 内补丁间隔 */
  54.     }
  55.     /* ------------------- end 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
  56.     
  57.     /* ------------------- start 针对 IE 的 CSS 弹出菜单 -------------------*/
  58.     .levelIe{  /* 定义一级类别属性 */
  59.         width:120px; /* 宽度 */
  60.         height:17; /* 高度 */
  61.         position:relative; /* 显示位置为相对位置 */
  62.         display:block; /* 以块模式显示 */
  63.         background-color:#D8D8D8; /* 背景色 */
  64.         padding:0px 2px; /* 文字内补丁间隔 */
  65.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
  66.         float:left;
  67.     }
  68.     .levelIe { /* 当鼠标划过一级菜单时 */
  69.         background-color:#6633FF; /* 背景色 */
  70.         color:#FFFFFF; /* 文字颜色 */
  71.     }
  72.     .levelIe .level_ { /* 鼠标划过时触发显示二级类别 */
  73.         display:block; /* 以块显示 */
  74.         width:124px; /* 宽度 */
  75.         height:auto; /* 高度 */
  76.         margin:0px -2px 0px -2px; /* 外补丁 */
  77.         background-color:#EFEFEF; /* 定义背景色 */
  78.         position:absolute; /* 位置为绝对位置 */
  79.     }
  80.     .levelIe .level_ .level_title {
  81.         /* 定义二级类别标题样式 */
  82.         font-weight:bold; /* 字体加粗 */
  83.         background-color:#A7ADFE; /* 背景色 */
  84.         color:white; /* 文字颜色 */
  85.     }
  86.     .levelIe .level_ a:hover {
  87.         /* 定义二级类别链接显示样式 */
  88.         background-color:#F83658; /* 背景色 */
  89.         color:white; /* 文字颜色 */
  90.     }
  91.     .levelIe .level_ * { 
  92.         /* 定义所有二级类别通用属性 */
  93.         display:block; /* 以块显示 */
  94.         color:black; /* 文字颜色 */
  95.         padding:0px 2px; /* 内补丁间隔 */
  96.     }
  97.     /* ------------------- end 针对 IE 的 CSS 弹出菜单 -------------------*/
  98. /*]]>*/
  99. </style>
  100. <script type="text/javascript">
  101. //<![CDATA[
  102. if (navigator.appName=="Microsoft Internet Explorer") {
  103.     function fPmHorizontalBottomOut() {
  104.         var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div");
  105.         for (var i=0; i<getItem.length; i++) {
  106.             getItem[i].οnmοuseοver=function() { 
  107.                 if(    this.className=="level"){
  108.                     this.className="levelIe";
  109.                 }
  110.             }
  111.             getItem[i].οnmοuseοut=function() { 
  112.                 if(    this.className=="levelIe"){
  113.                     this.className="level";
  114.                 }
  115.             }//css popup menu script by shawl.qiu
  116.         }
  117.     }
  118.     window.οnlοad=fPmHorizontalBottomOut;
  119. }
  120. //]]>
  121. </script>
  122. </head>
  123. <body>
  124. <p/><p/><p/><p/><p/>
  125. <div class="pmHorizontalBottomOut" id="pmHorizontalBottomOut">
  126.     <div class="level">
  127.         <div class="levelTitle">level</div>
  128.         <div class="level_">
  129.             <div class="level_title">level_ title</div>
  130.             <a href="?cat=level&id=1">level_ title 1</a>
  131.             <a href="?cat=level&id=2">level_ title 2</a>
  132.             <a href="?cat=level&id=3">level_ title 3</a>
  133.             <a href="?cat=level&id=4">level_ title 4</a>
  134.             <a href="?cat=level&id=5">level_ title 5</a>
  135.         </div>
  136.     </div>
  137.     <div class="level">
  138.         <div class="levelTitle">level 1</div>
  139.         <div class="level_">
  140.             <div class="level_title">level_ title</div>
  141.             <a href="?cat=level_1&id=1">level_ title 1</a>
  142.             <a href="?cat=level_1&id=2">level_ title 2</a>
  143.             <a href="?cat=level_1&id=3">level_ title 3</a>
  144.             <a href="?cat=level_1&id=4">level_ title 4</a>
  145.             <a href="?cat=level_1&id=5">level_ title 5</a>
  146.         </div>
  147.     </div>
  148.     <div class="level">
  149.         <div class="levelTitle">level 2</div>
  150.         <div class="level_">
  151.             <div class="level_title">level_ title</div>
  152.             <a href="?cat=level_2&id=1">level_ title 1</a>
  153.             <a href="?cat=level_2&id=2">level_ title 2</a>
  154.             <a href="?cat=level_2&id=3">level_ title 3</a>
  155.             <a href="?cat=level_2&id=4">level_ title 4</a>
  156.             <a href="?cat=level_2&id=5">level_ title 5</a>
  157.         </div>
  158.     </div>
  159.     <div class="level">
  160.         <div class="levelTitle">level 3</div>
  161.         <div class="level_">
  162.             <div class="level_title">level_ title</div>
  163.             <a href="?cat=level_3&id=1">level_ title 1</a>
  164.             <a href="?cat=level_3&id=2">level_ title 2</a>
  165.             <a href="?cat=level_3&id=3">level_ title 3</a>
  166.             <a href="?cat=level_3&id=4">level_ title 4</a>
  167.             <a href="?cat=level_3&id=5">level_ title 5</a>
  168.         </div>
  169.     </div>
  170.     <div class="level">
  171.         <div class="levelTitle">level 4</div>
  172.         <div class="level_">
  173.             <div class="level_title">level_ title</div>
  174.             <a href="?cat=level_4&id=1">level_ title 1</a>
  175.             <a href="?cat=level_4&id=2">level_ title 2</a>
  176.             <a href="?cat=level_4&id=3">level_ title 3</a>
  177.             <a href="?cat=level_4&id=4">level_ title 4</a>
  178.             <a href="?cat=level_4&id=5">level_ title 5</a>
  179.         </div>
  180.     </div>
  181. </div>
  182. </body>
  183. </html>


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

4. 预览

4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览
<script type="text/javascript">//</script>

4.2 2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览
<script type="text/javascript">/*//*/</script>

 
fanweiwei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS与CSS简单实现自定义弹出框的原理(不使用iframe)
qq_37580940的博客
09-15 1589
弹出框，弹出层，登录页面，JS,CSS,实现原理，思路
css js 弹出框
06-20
css js 弹出框
CSS 居中定位的弹窗效果（源码超详细解释）
最新发布
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-14 3061
这是一个超详细的 CSS实现居中定位弹窗效果源码解析，如果看完这篇文章还没学明白，小编劝你趁年轻赶紧改行！ 弹窗一般有两种情况： 弹窗的尺寸是已知的（宽高都是固定的）； 弹窗尺寸是未知的（内容不固定，弹窗高度随内容改变）； 本篇文章会对这两种情况，各给出2种解决方法。每一种方法的实现源码解释都超详细！！
css模态弹出框原理_CSS3模态弹出窗口
cuken7684698822的博客
08-01 1071
css模态弹出框原理CSS3 Modal Popups CSS popup. Today I will tell you how to create cool CSS3 modal popup windows (or boxes). Literally, not so long ago, in order to achieve such effects, we used jQuery. But, ...
css 弹出框
05-29
这是一款利用jQuery和CSS3实现的自定义弹出窗口，这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html，十分灵活。另外最重要的一个特点是，它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果，挺酷的。
js prototype 格式化数字 By shawl.qiu
10-30
js prototype 格式化数字 By shawl.qiu
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
10-31
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
10-31
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
仿微信公众平台固定在底部弹出的导航菜单
10-30
仿微信公众平台固定在底部弹出的导航菜单，适用于手机端
html+css+js实现点击弹出窗口效果
04-23
用html+css+js/jquery实现的点击按钮弹出一个层窗口效果。注释部分使用js实现的，script部分则是jquery实现的，效果更好一些。可以把jquery部分注释掉来看js的效果
DIV+CSS弹出窗体（非常漂亮）
05-01
利用DIV实现在Web窗体内弹出一个DIV窗体，类似QQ空间弹出的登录窗口。。。。
js组件仿微信公众号底部弹出菜单
05-13
js组件仿微信公众号底部弹出菜单代码
点击底部按钮弹出菜单
08-26
点击屏幕底部按钮，会弹出一个菜单窗口，模仿当今众多的软件设计思路
CSS+HTML5制作弹出框
09-09
自定义基础弹出框，可以在此基础上自定义出各类自己需要的弹出框
html5+css3仿微信底部菜单(可自定义)
12-24
采用html5+css3写的仿微信底部菜单(可自定义)，喜欢的可以下载，演示地址：t.caozha.com/m/
移动端底部弹框js及css
11-08
这是一份移动端手机底部弹框的css以及js，还有部分js及前端代码在我的博客里，你可以直接进入我的博客主页查找，或者在csdn中搜索：移动端手机底部弹框查找
Content-Type一览
热门推荐
09-17 3万+
            Multipart Internet Mail Extensions (MIME) 关于Content-Type的一张表.(方便查找了哦)http://www.utoronto.ca/webdocs/HTMLdocs/Book/Book-3ed/appb/mimetype.html Description of
ASP.NET事件回传机制
05-09 4635
ASP.NET事件回传机制在ASP.NET里面我们最喜欢做的事情是拖动一个Button然后双击，然后输入代码就可以了。这个称之为事件回传机制，属于软件开发的体系范畴，但并不属于Web开发的范畴，因为Web是基于TCP/IP协议的，但是TCP/IP协议确是一个无状态的协议，那么ASP.NET是如何引入事件回传的呢？首先请新建一个网站，然后添加一个WebUserControl，命名为：EventMod
发布两个ASP.NET控件ComboBox 和DateControl
12-25 4365
ComboBox 使用介绍1.         介绍ComboBox是一款模仿WinFrom中的ComboBox控件设计的WEB控件,她完全集合了WEB中TextBox和Dropdownlist控件的功能为用户完成TextBox和Dropdownlist在单独运行时的缺陷.2.         自身属性和事件l         属性                       

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值