지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > CSS 튜토리얼 > 본문

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

WBOY
풀어 주다： 2016-05-16 12:08:46
원래의
5193명이 탐색했습니다.

编写纯 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에서 그룹화하고 계산하는 방법은 무엇입니까? 친구에게 보낸 삭제되지 않은 메시지의 총 개수를 추출하는 쿼리를 작성하려고 합니다. 다음은 테이블 구조의 스크린샷입니다. 제가 달성하려는 출력은 다음과 같습니다....
    에서 2024-04-06 18:30:17
    0
    1
    353
    루프 오버를 위해 ID별로 MySQL 결과 그룹화 mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
    에서 2024-04-06 17:27:56
    0
    1
    406
    SCSS를 사용하여 기본값 및 CSS 변수 생성 웹사이트 스타일링을 구현하고 있습니다. 레거시 지원상의 이유로 적어도 한동안은 IE11을 지원해야 합니다. 작업 흐름과 제정신의 이유로 가능할 때마다 CSS 변수...
    에서 2024-04-06 17:46:54
    0
    1
    355
    부분 값 조건에서 쿼리 기록 - SQL 기술 공유 code라는 열이 있는 zipcode라는 테이블이 있습니다. Code 열에는 우편번호 접두사가 포함됩니다(예: 395453302120312). 제공된 우편번호가 ...
    에서 2024-04-06 16:01:26
    0
    1
    395
    리듀서 내에서 오류를 기록하는 방법 저는 Redux를 처음 접했고 오류 메시지를 콘솔에 기록하는 방법에 대해 약간 혼란스러워했습니다. 저는 React, ReduxToolkit 및 TypeScript...
    에서 2024-04-05 12:56:32
    0
    1
    374
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿