您现在的位置是:门户> 编程语言> HTML/CSS

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
2020-04-07 40人围观 0条评论
简介编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu
    编写纯 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 弹出菜单
      linenum
    1. http://www.w3.org/TR/html4/loose.dtd">
    2. Untitled Document
    3. /*
    4.     body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
    5.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
    6.     .pmVerticalRightOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
    7.     .pmVerticalRightOut .level{  /* 定义一级类别属性 */
    8.         width:120px; /* 宽度 */
    9.         height:17; /* 高度 */
    10.         position:relative; /* 显示位置为相对位置 */
    11.         display:block; /* 以块模式显示 */
    12.         background-color:#D8D8D8; /* 背景色 */
    13.         padding:0px 2px; /* 文字内补丁间隔 */
    14.         margin:0px 0px 1px 0px; /* 菜单外补丁间隔 */
    15.     }
    16.     .pmVerticalRightOut .level:hover { /* 当鼠标划过一级菜单时 */
    17.         background-color:#6633FF; /* 背景色 */
    18.         color:#FFFFFF; /* 文字颜色 */
    19.     }
    20.     .pmVerticalRightOut .level_{display:none; /* 默认隐藏二级类别 */}
    21.     
    22.     .pmVerticalRightOut .level:hover .level_ { /* 鼠标划过时触发显示二级类别 */
    23.         display:block; /* 以块显示 */
    24.         left:124px; /* 相对于一级类别显示的位置 */
    25.         width:120px; /* 宽度 */
    26.         height:auto; /* 高度 */
    27.         top:0px; /* 相对于一级类别所在位置的顶端 */
    28.         background-color:#EFEFEF; /* 定义背景色 */
    29.         position:absolute; /* 位置为绝对位置 */
    30.     }
    31.     .pmVerticalRightOut .level:hover .level_ .level_title {
    32.         /* 定义二级类别标题样式 */
    33.         font-weight:bold; /* 字体加粗 */
    34.         background-color:#A7ADFE; /* 背景色 */
    35.         color:white; /* 文字颜色 */
    36.     }
    37.     .pmVerticalRightOut .level:hover .level_ a:hover {
    38.         /* 定义二级类别链接显示样式 */
    39.         background-color:#F83658; /* 背景色 */
    40.         color:white; /* 文字颜色 */
    41.     }
    42.     .pmVerticalRightOut .level_ * { 
    43.         /* 定义所有二级类别通用属性 */
    44.         display:block; /* 以块显示 */
    45.         color:black; /* 文字颜色 */
    46.         padding:0px 2px; /* 内补丁间隔 */
    47.     }
    48. /*]]>*/
    49.     
    50.         level
  •         
  •             level_ title
  •             level_ title 1
  •             level_ title 2
  •             level_ title 3
  •             level_ title 4
  •             level_ title 5
  •         
  •     
  •     
  •         level 1
  •         
  •             level_ title
  •             level_ title 1
  •             level_ title 2
  •             level_ title 3
  •             level_ title 4
  •             level_ title 5
  •         
  •     
  •     
  •         level 2
  •         
  •             level_ title
  •             level_ title 1
  •             level_ title 2
  •             level_ title 3
  •             level_ title 4
  •             level_ title 5
  •         
  •     
  •     
  •         level 3
  •         
  •             level_ title
  •             level_ title 1
  •             level_ title 2
  •             level_ title 3
  •             level_ title 4
  •             level_ title 5
  •         
  •     
  •     
  •         level 4
  •         
  •             level_ title
  •             level_ title 1
  •             level_ title 2
  •             level_ title 3
  •             level_ title 4
  •             level_ title 5
  •         
  •     

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

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

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

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


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

    4. 预览

    4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览
    /**/ //
    level
    level 1
    level 2
    level 3
    level 4

    4.2 2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览
    /**/ /* //
    level
    level 1
    level 2
    level 3
    level 4


    您可能感兴趣的文章:
    分享:

    上一篇:给自己的网站制作一个favicon.ico图标的实现方法

    下一篇:制作WEB在线编辑器-插入HTML标签

    文章评论