Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > The principle and implementation of writing pure CSS pop-up menu By shawl.qiu_Experience exchange

The principle and implementation of writing pure CSS pop-up menu By shawl.qiu_Experience exchange

WBOY
Release： 2016-05-16 12:08:46
Original
5220 people have browsed it

The principle and implementation of writing pure CSS pop-up menu By shawl.qiu


Abstract:
This article introduces the use of CSS to write multi-style pop-up menus suitable for Opera, Firefox, and IE
## #Description:
The key point of writing a CSS pop-up menu is to display the hidden label when the mouse moves over the target.
The label to be hidden is hidden using the display:none; attribute.
Trigger display Hidden tags mainly use the :hover attribute, and use display:block; to display hidden tags.

But because browsers do not support CSS consistently.
For Opera or Firefox, we can write a pure CSS menu , they support the :hover attribute of any tag.
For IE browser, :hover only works on the a tag, but we can use the script's onmouseover, onmouseout to simulate the :hover attribute of other tags.
Therefore Writing a CSS pop-up menu suitable for IE requires the use of a few scripts.

Directory:
1. Writing a CSS pop-up menu on the right side of the vertical row.
1.1 Really based on Opera, Firefox pure CSS Pop-up menu
1.2 Compatible with IE, Opera, Firefox CSS pop-up menu (script implementation)

2. Write a horizontal bottom pop-up CSS menu.
2.1 Real pure CSS pop-up based on Opera, Firefox Menu
2.2 Compatible with IE, Opera, Firefox CSS pop-up menu (script implementation)

3. Conclusion

4. Preview

shawl.qiu
2006 -10-01

http://blog.csdn.net/btbtd
1. Write a CSS menu that pops up on the right side of the vertical row.

1.1 True Based on Opera, Firefox pure CSS popup menu

    linenum "
  1. http://www.w3.org/TR/html4/loose.dtd">
  4. Untitled Document

  10.     
  11.         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">
    5. 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. 编写横排底部弹出的 CSS 菜单. 

    2.1 真正的基于 Opera, Firefox 纯 CSS 弹出菜单
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    7. /*    body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
    8.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
    9.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
    10.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
    11.         width:120px; /* 宽度 */
    12.         height:17; /* 高度 */
    13.         position:relative; /* 显示位置为相对位置 */
    14.         display:block; /* 以块模式显示 */
    15.         background-color:#D8D8D8; /* 背景色 */
    16.         padding:0px 2px; /* 文字内补丁间隔 */
    17.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
    18.         float:left;
    19.     }
    20. .pmHorizontalBottomOut .level:hover { /* When the mouse moves over the first-level menu */
    21. background-color:#6633FF; /* background color */
    22. color:#FFFFFF; /* text color */
    23. }
    24. .pmHorizontalBottomOut .level_{display:none; /* Second-level categories are hidden by default */}
    26. .pmHorizontalBottomOut .level:hover .level_ { /* Trigger the display of the secondary category when the mouse moves over it */
    27.        display:block; /* Display in blocks */
    28. width:124px; /* Width */
    29. height:auto; /* height */
    30. margin:0px -2px 0px -2px; /* External patch */
    31. background-color:#EFEFEF; /* Define background color */
    32. Position:absolute; /* Position is absolute position */
    33. }
    34. .pmHorizontalBottomOut .level:hover .level_ .level_title {
    35. /* Define the secondary category title style */
    36. font-weight:bold; /* Font bold */
    37. background-color:#A7ADFE; /* background color */
    38. color:white; /* text color */
    39. }
    40. .pmHorizontalBottomOut .level:hover .level_ a:hover {
    41. /* Define the display style of secondary category links */
    42. background-color:#F83658; /* background color */
    43. color:white; /* text color */
    44. }
    45. .pmHorizontalBottomOut .level_ * {
    46.                                                                                                /* Define the common attributes of all second-level categories */
    47.        display:block; /* Display in blocks */
    48. color:black; /* text color */
    49. padding:0px 2px; /* inner patch interval */
    50. }
    51. /*]]>*/

    57.     
    58.         
      level
    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.     
    68.     
    69.         
      level 1
    70.         
    71.             
      level_ title
    72.             level_ title 1
    73.             level_ title 2
    74.             level_ title 3
    75.             level_ title 4
    76.             level_ title 5
    77.         
    78.     
    79.     
    80.         
      level 2
    81.         
    82.             level_ title
    83.             level_ title 1
    84.             level_ title 2
    85.             level_ title 3
    86.             level_ title 4
    87.             level_ title 5
    88.         
    89.     
    90.     
    91.         level 3
    92.         
    93.             level_ title
    94.             level_ title 1
    95.             level_ title 2
    96.             level_ title 3
    97.             level_ title 4
    98.             level_ title 5
    99.         
    100.     
    101.     
    102.         level 4
    103.         
    104.             level_ title
    105.             level_ title 1
    106.             level_ title 2
    107.             level_ title 3
    108.             level_ title 4
    109.             level_ title 5
    110.         
    111.     

    2.2 兼容 IE, Opera, Firefox 的 CSS 弹出菜单(脚本实现)
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    7. /*    body{ margin:0px auto; width:768px; /* 定义页面居中显示,*/}
    8.     *{text-decoration:none!important; /* 定义所有链接不显示下划线 */}
    9.     /* ------------------- start 针对 Opera, Firefox 的 CSS 弹出菜单 -------------------*/
    10.     .pmHorizontalBottomOut{background-color:#fff!important; /* 定义主菜单域背景色 */} 
    11.     .pmHorizontalBottomOut .level{  /* 定义一级类别属性 */
    12.         width:120px; /* 宽度 */
    13.         height:17; /* 高度 */
    14.         position:relative; /* 显示位置为相对位置 */
    15.         display:block; /* 以块模式显示 */
    16.         background-color:#D8D8D8; /* 背景色 */
    17.         padding:0px 2px; /* 文字内补丁间隔 */
    18.         margin:0px 1px 0px 0px; /* 菜单外补丁间隔 */
    19.         float:left;
    20.     }
    21. .pmHorizontalBottomOut .level:hover { /* When the mouse moves over the first-level menu */
    22. background-color:#6633FF; /* background color */
    23. color:#FFFFFF; /* text color */
    24. }
    25. .pmHorizontalBottomOut .level_{display:none; /* Second-level categories are hidden by default */}
    27. .pmHorizontalBottomOut .level:hover .level_ { /* Trigger the display of the secondary category when the mouse moves over it */
    28.        display:block; /* Display in blocks */
    29. width:124px; /* Width */
    30. height:auto; /* height */
    31. margin:0px -2px 0px -2px; /* External patch */
    32. background-color:#EFEFEF; /* Define background color */
    33. Position:absolute; /* Position is absolute position */
    34. }
    35. .pmHorizontalBottomOut .level:hover .level_ .level_title {
    36. /* Define the secondary category title style */
    37. font-weight:bold; /* Font bold */
    38. background-color:#A7ADFE; /* background color */
    39. color:white; /* text color */
    40. }
    41. .pmHorizontalBottomOut .level:hover .level_ a:hover {
    42. /* Define the display style of secondary category links */
    43. background-color:#F83658; /* background color */
    44. color:white; /* text color */
    45. }
    46. .pmHorizontalBottomOut .level_ * {
    47.                                                                                                /* Define the common attributes of all second-level categories */
    48.        display:block; /* Display in blocks */
    49. color:black; /* text color */
    50. padding:0px 2px; /* inner patch interval */
    51. }
    52. /* ------------------- end CSS pop-up menu for Opera, Firefox ------------------ --*/
    54. /* ------------------- start CSS pop-up menu for IE ------------------- */
    55. .levelIe{ /* Define first-level category attributes */
    56. width:120px; /* Width */
    57. Height:17; /* Height */
    58. Position:relative; /* Display position is relative position */
    59.        display:block; /* Display in block mode */
    60. background-color:#D8D8D8; /* background color */
    61. padding:0px 2px; /* patch interval within text */
    62. margin:0px 1px 0px 0px; /* Patch interval outside menu */
    63. float:left;
    64. }
    65. .levelIe { /* When the mouse moves over the first-level menu */
    66. background-color:#6633FF; /* background color */
    67. color:#FFFFFF; /* text color */
    68. }
    69. .levelIe .level_ { /* Trigger the display of secondary categories when the mouse moves over */
    70.        display:block; /* Display in blocks */
    71. width:124px; /* Width */
    72. height:auto; /* height */
    73. margin:0px -2px 0px -2px; /* External patch */
    74. background-color:#EFEFEF; /* Define background color */
    75. Position:absolute; /* Position is absolute position */
    76. }
    77. .levelIe .level_ .level_title {
    78. /* Define the secondary category title style */
    79. font-weight:bold; /* Font bold */
    80. background-color:#A7ADFE; /* background color */
    81. color:white; /* text color */
    82. }
    83. .levelIe .level_ a:hover {
    84. /* Define the display style of secondary category links */
    85. background-color:#F83658; /* background color */
    86. color:white; /* text color */
    87. }
    88. .levelIe .level_ * {
    89.                                                                                                /* Define the common attributes of all second-level categories */
    90.        display:block; /* Display in blocks */
    91. color:black; /* text color */
    92. padding:0px 2px; /* inner patch interval */
    93. }
    94. /* ------------------- end CSS pop-up menu for IE ------------------- */
    95. /*]]>*/

    102.     
    103.         level
    104.         
    105.             level_ title
    106.             level_ title 1
    107.             level_ title 2
    108.             level_ title 3
    109.             level_ title 4
    110.             level_ title 5
    111.         
    112.     
    113.     
    114.         level 1
    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 2
    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 3
    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 4
    148.         
    149.             level_ title
    150.             level_ title 1
    151.             level_ title 2
    152.               level_ title 3
    153. level_ title 4
    154. level_ title 5


    3. Conclusion
    As can be seen from the above example, if a usable CSS pop-up menu example has been written, then the pop-up position must be written in other If you have local CSS pop-up menu, you only need to modify it slightly.

    4. Preview

    4.1 1.2 Preview of CSS pop-up menu (script implementation) compatible with IE, Opera, and Firefox# ##
    /**/
    Related labels：
    css
    source：php.cn
    Previous article：Lesson02_05 Header Element_Basic Tutorial Next article：Lesson02_04 Form Label (2)_Basic Tutorial
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    How to group and count in MySQL? I'm trying to write a query that extracts the total number of undeleted messages sent to f...
    From 2024-04-06 18:30:17
    0
    1
    353
    Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...
    From 2024-04-06 17:27:56
    0
    1
    406
    Generate default values ​​and CSS variables using SCSS I'm implementing website styling. For legacy support reasons, I need to support IE11, at l...
    From 2024-04-06 17:46:54
    0
    1
    355
    Record query under partial value conditions - SQL skill sharing I have a table called zipcode which has a column called code. The Code column contains the...
    From 2024-04-06 16:01:26
    0
    1
    395
    How to log errors from within reducers I'm new to Redux and a little confused on how to log error messages to the console. I'm us...
    From 2024-04-05 12:56:32
    0
    1
    374
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template