社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > css教程 > 编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu_经验交流

编写纯 CSS 弹出菜单的原理及实现 By shawl.qiu_经验交流

WBOY
发布： 2016-05-16 12:08:46
原创
5222 人浏览过

编写纯 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. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. " http://www.w3.org/TR/html4/loose.dtd">
  6. Untitled Document

  12.     
  13.         
    level
  14.         
  15.             
    level_ title
  16.             level_ title 1
  17.             level_ title 2
  18.             level_ title 3
  19.             level_ title 4
  20.             level_ title 5
  21.         
  •     
  •     
  •         
    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. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. " http://www.w3.org/TR/html4/loose.dtd">
    6. Untitled Document
    8. <script> <LI>//<![CDATA[ <LI>if (navigator.appName=="Microsoft Internet Explorer") { <LI> function fPmVerticalRightOut() { <LI> var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div"); <LI> for (var i=0; i<getItem.length; i++) { <LI> getItem[i].onmouseover=function() { <LI> if( this.className=="level"){ <LI> this.className="levelIe"; <LI> } <LI> } <LI> getItem[i].onmouseout=function() { <LI> if( this.className=="levelIe"){ <LI> this.className="level"; <LI> } <LI> }//css popup menu script by shawl.qiu <LI> } <LI> } <LI> window.onload=fPmVerticalRightOut; <LI>} <LI>//]]> <LI></script>

    13.     
    14.         
      level
    15.         
    16.             
      level_ title
    17.             level_ title 1
    18.             level_ title 2
    19.             level_ title 3
    20.             level_ title 4
    21.             level_ title 5
    22.         
    23.     
    24.     
    25.         
      level 1
    26.         
    27.             
      level_ title
    28.             level_ title 1
    29.             level_ title 2
    30.             level_ title 3
    31.             level_ title 4
    32.             level_ title 5
    33.         
    34.     
    35.     
    36.         
      level 2
    37.         
    38.             
      level_ title
    39.             level_ title 1
    40.             level_ title 2
    41.             level_ title 3
    42.             level_ title 4
    43.             level_ title 5
    44.         
    45.     
    46.     
    47.         
      level 3
    48.         
    49.             
      level_ title
    50.             level_ title 1
    51.             level_ title 2
    52.             level_ title 3
    53.             level_ title 4
    54.             level_ title 5
    55.         
    56.     
    57.     
    58.         
      level 4
    59.         
    60.             
      level_ title
    61.             level_ title 1
    62.             level_ title 2
    63.             level_ title 3
    64.             level_ title 4
    65.             level_ title 5
    66.         
    67.     

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

    2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
      linenum
    1. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. " http://www.w3.org/TR/html4/loose.dtd">
    6. Untitled Document

    12.     
    13.         
      level
    14.         
    15.             
      level_ title
    16.             level_ title 1
    17.             level_ title 2
    18.             level_ title 3
    19.             level_ title 4
    20.             level_ title 5
    21.         
    22.     
    23.     
    24.         
      level 1
    25.         
    26.             
      level_ title
    27.             level_ title 1
    28.             level_ title 2
    29.             level_ title 3
    30.             level_ title 4
    31.             level_ title 5
    32.         
    33.     
    34.     
    35.         
      level 2
    36.         
    37.             
      level_ title
    38.             level_ title 1
    39.             level_ title 2
    40.             level_ title 3
    41.             level_ title 4
    42.             level_ title 5
    43.         
    44.     
    45.     
    46.         
      level 3
    47.         
    48.             
      level_ title
    49.             level_ title 1
    50.             level_ title 2
    51.             level_ title 3
    52.             level_ title 4
    53.             level_ title 5
    54.         
    55.     
    56.     
    57.         
      level 4
    58.         
    59.             
      level_ title
    60.             level_ title 1
    61.             level_ title 2
    62.             level_ title 3
    63.             level_ title 4
    64.             level_ title 5
    65.         
    66.     

    2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
      linenum
    1. nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. " http://www.w3.org/TR/html4/loose.dtd">
    6. Untitled Document
    8. <script> <LI>//<![CDATA[ <LI>if (navigator.appName=="Microsoft Internet Explorer") { <LI> function fPmHorizontalBottomOut() { <LI> var getItem = document.getElementById("pmHorizontalBottomOut").getElementsByTagName("div"); <LI> for (var i=0; i<getItem.length; i++) { <LI> getItem[i].onmouseover=function() { <LI> if( this.className=="level"){ <LI> this.className="levelIe"; <LI> } <LI> } <LI> getItem[i].onmouseout=function() { <LI> if( this.className=="levelIe"){ <LI> this.className="level"; <LI> } <LI> }//css popup menu script by shawl.qiu <LI> } <LI> } <LI> window.onload=fPmHorizontalBottomOut; <LI>} <LI>//]]> <LI></script>

    13.     
    14.         
      level
    15.         
    16.             
      level_ title
    17.             level_ title 1
    18.             level_ title 2
    19.             level_ title 3
    20.             level_ title 4
    21.             level_ title 5
    22.         
    23.     
    24.     
    25.         
      level 1
    26.         
    27.             
      level_ title
    28.             level_ title 1
    29.             level_ title 2
    30.             level_ title 3
    31.             level_ title 4
    32.             level_ title 5
    33.         
    34.     
    35.     
    36.         
      level 2
    37.         
    38.             
      level_ title
    39.             level_ title 1
    40.             level_ title 2
    41.             level_ title 3
    42.             level_ title 4
    43.             level_ title 5
    44.         
    45.     
    46.     
    47.         
      level 3
    48.         
    49.             
      level_ title
    50.             level_ title 1
    51.             level_ title 2
    52.             level_ title 3
    53.             level_ title 4
    54.             level_ title 5
    55.         
    56.     
    57.     
    58.         
      level 4
    59.         
    60.             
      level_ title
    61.             level_ title 1
    62.             level_ title 2
    63.             level_ title 3
    64.             level_ title 4
    65.             level_ title 5
    66.         
    67.     


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

    4. 预览

    4.1 1.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现) 的预览
    相关标签：
    css
    来源：php.cn
    上一篇：Lesson02_05 头元素_基础教程 下一篇：Lesson02_04 表单标签(2)_基础教程
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    MySQL中如何进行分组和计数？ 我正在尝试编写一个查询，提取发送给朋友的未删除消息的总数。这是表结构的屏幕截图：我想要实现的输出结果如下：idmessages_count---------------------...
    来自于 2024-04-06 18:30:17
    0
    1
    353
    按照ID对MySQL结果进行分组以便循环遍历 我有一个表，其中有mysql中的航班数据。我正在编写一个php代码，它将使用codeigniter3对数据进行分组和显示journey_idair_idFlightDuration...
    来自于 2024-04-06 17:27:56
    0
    1
    406
    使用SCSS生成默认值和CSS变量 我正在实现网站样式。出于遗留支持的原因，我需要支持IE11，至少一段时间。出于工作流程和我的理智原因，我想尽可能使用css变量。我已经研究过这个解决方案，它会生成一些有效的东西，但...
    来自于 2024-04-06 17:46:54
    0
    1
    355
    部分值条件下的记录查询 - SQL技巧分享 我有一个名为zipcode的表，其中有一个名为code的列。Code列包含邮政编码的前缀，例如395453302120312我想编写一个SQL查询，检查提供的zipcode是否与表...
    来自于 2024-04-06 16:01:26
    0
    1
    395
    如何记录来自于reducers内部的错误 我对Redux还不太熟悉，有点困惑如何将错误消息记录到控制台中。我正在使用React、ReduxToolkit和TypeScript。这是我编写的一个reducer的示例：//Re...
    来自于 2024-04-05 12:56:32
    0
    1
    374
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板