搜尋

首頁  >  文章  >  web前端  >  寫出純 CSS 彈出式選單的原理及實作 By shawl.qiu_經驗交流

寫出純 CSS 彈出式選單的原理及實作 By shawl.qiu_經驗交流

WBOY
WBOY原創
2016-05-16 12:08:465190瀏覽

撰寫純 CSS 彈出式功能表的原則及實作 By shawl.qiu


#摘要: 
本文介紹了使用 CSS 編寫適用於 Opera, Firefox, IE 的多重彈出式功能表
## #說明:
編寫 CSS 彈出選單的重點不外乎當滑鼠移到目標上時, 顯示隱藏的標籤. 
要隱藏的標籤使用 display:none; 屬性進行隱藏. 
觸發顯示隱藏標籤主要使用 :hover 屬性, 並用 display:block; 顯示隱藏的標籤.

但由於瀏覽器對 CSS 的支援並非一致.
#對於 Opera 或 Firefox, 我們可以寫出純 CSS , 他們支援任何標籤的 :hover 屬性.
而對於 IE 瀏覽器, :hover 只對 a 標籤起作用, 但我們可以使用腳本的 onmouseover, onmouseout 模擬出其他標籤的屬性.
編寫適用於 IE 的 CSS 彈出式功能表必須使用到少許的腳本.

#目錄:
1. 編寫直排右側彈出的 CSS 選單. 
1.1 真正的基於 Opera, CSSrefox  
1.1 真正的基於 Opera, Firefox  
1.1 真正的基於 Opera, Firefox  CSS彈出式選單
1.2 相容 IE, Opera, Firefox 的 CSS 彈出式功能表(腳本實作)

2. 編寫橫排底部彈出的 CSS 功能表. 
2.1 真正的基於彈出式Opera、選單
2.2 相容 IE, Opera, Firefox 的 CSS 彈出式選單(腳本實作)

3. 結論

#4. 預覽

shawl.qiu
4. 預覽

shawl.qiu##2006
#4. 預覽

shawl.qiu##2006
    #4. 預覽shawl.qiu##2006
  1. #4. 預覽
  2. shawl.qiu
  4. #4. 預覽
  6. shawl.qiu##2006
  7. ##4. 預覽
  9. shawl.qiu
  10. ####### -10-01######http://blog.csdn.net/btbtd#########1. 寫直排右邊彈出的 CSS 選單. #######1.1 真正的基於 Opera, Firefox 純 CSS 彈出式選單### ######linenum### ### ### ### ### ###Untitled Document ### ###/*    .pmVerticalRightOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
  11.     .pmVerticalRightOut .level{  /* 定義一級類別屬性 */
  12.         width:120px; /* 寬度 */
  13.         height:17; /* 高度 */
  14.         position:relative; /* 顯示位置為相對位置 */
  15.         display:block; /* 以區塊模式顯示 */
  16.         background-color:#D8D8D8; /* 背景色 */
  17.         padding:0px 2px; /* 文字內補丁間隔 */
  18.         margin:0px 0px 1px 0px; /* 選單外補丁間隔 */
  19.     }
  20.     .pmVerticalRightOut .level:hover { /* 當滑鼠劃過一級選單時 */
  21.         background-color:#6633FF; /* 背景色 */
  22.         color:#FFFFFF; /* 文字顏色 */
  23.     }
  24.     .pmVerticalRightOut .level_{display:none; /* 預設隱藏二級類別 */}
  25.     
  26.     .pmVerticalRightOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
  27.         display:block; /* 以區塊顯示 */
  28.         left:124px; /* 相對於一級類別所顯示的位置 */
  29.         width:120px; /* 寬度 */
  30.         height:auto; /* 高度 */
  31.         top:0px; /* 相對於一級類別所在位置的頂端 */
  32.         background-color:#EFEFEF; /* 定義背景色 */
  33.         position:absolute; /* 位置為絕對位置 */
  34.     }
  35.     .pmVerticalRightOut .level:hover .level_ .level_title {
  36.         /* 定義二級類別標題樣式 */
  37.         font-weight:bold; /* 字體加粗 */
  38.         background-color:#A7ADFE; /* 背景色 */
  39.         color:white; /* 文字顏色 */
  40.     }
  41.     .pmVerticalRightOut .level:hover .level_ a:hover {
  42.         /* 定義二級類別連結顯示樣式 */
  43.         background-color:#F83658; /* 背景色 */
  44.         color:white; /* 文字顏色 */
  45.     }
  46.     .pmVerticalRightOut .level_ * { 
  47.         /* 定義所有二級類別一般屬性 */
  48.         display:block; /* 以區塊顯示 */
  49.         color:black; /* 文字顏色 */
  50.         padding:0px 2px; /* 內補丁間隔 */
  51.     }
  52. /*]]>*/

  58.     
  59.         level
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ 標題 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 1
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ title 3
  • level_標題4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 2
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ 標題 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 3
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  • level_ title 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     
  •     
  •         
    level 4
  •         
  •             level_ title
  •             level_ 標題 1
  •             level_ 標題 2
  •             level_ title 3
  •             level_ 標題 4
  •             level_ 標題 5
  •         
  •     

    • 1.2 相容 IE、Opera、Firefox 的 CSS 彈出式選單（腳本實作）
      linenum
    1. " http://www.w3.org/TR/html4/loose.dtd">
    5. Untitled Document
    8. //if (navigator.appName=="Microsoft Internet Explorer") {
    9.     function fPmVerticalRightOut() {
    10.         var getItem = document.getElementById("pmVerticalRightOut").getElementsByTagName("div");
    11.         for (var i=0; i            getItem[i].onmouseover=function() { 
    12.                 if(    this.className=="level"){
    13.                     this.className="levelIe";
    14.                 }
    15.             }
    16.             getItem[i].onmouseout=function() { 
    17.                 if(    this.className=="levelIe"){
    18.                     this.className="level";
    19.                 }
    20.             }//css彈出式選單腳本作者：shawl.qiu
    21.         }
    22.     }
    23.     window.onload=fPmVerticalRightOut;
    24. }
    25. //]]>

    31.     
    32.         level
    33.         
    34.             level_ title
    35.             level_ 標題 1
    36.             level_ 標題 2
    37.             level_ 標題 3
    38.             level_ 標題 4
    39.             level_ 標題 5
    40.         
    41.     
    42.     
    43.         
      level 1
    44.         
    45.             level_ title
    46.             level_ 標題 1
    47.             level_ 標題 2
    48.             level_ title 3
    49. level_標題4
    50.             level_ 標題 5
    51.         
    52.     
    53.     
    54.         
      level 2
    55.         
    56.             level_ title
    57.             level_ 標題 1
    58.             level_ 標題 2
    59.             level_ 標題 3
    60.             level_ 標題 4
    61.             level_ 標題 5
    62.         
    63.     
    64.     
    65.         
      level 3
    66.         
    67.             level_ title
    68.             level_ 標題 1
    69.             level_ 標題 2
    70. level_ title 3
    71.             level_ 標題 4
    72.             level_ 標題 5
    73.         
    74.     
    75.     
    76.         
      level 4
    77.         
    78.             level_ title
    79.             level_ 標題 1
    80.             level_ 標題 2
    81.             level_ title 3
    82.             level_ 標題 4
    83.             level_ 標題 5
    84.         
    85.     

    #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.     .pmHorizo​​ntalBottomOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
    10.     .pmHorizo​​ntalBottomOut .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.     .pmHorizo​​ntalBottomOut .level:hover { /* 當滑鼠劃過一級選單 */
    21.         background-color:#6633FF; /* 背景色 */
    22.         color:#FFFFFF; /* 文字顏色 */
    23.     }
    24.     .pmHorizo​​ntalBottomOut .level_{display:none; /* 預設隱藏二級類別 */}
    25.     
    26.     .pmHorizo​​ntalBottomOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    27.         display:block; /* 以區塊顯示 */
    28.         width:124px; /* 寬度 */
    29.         height:auto; /* 高度 */
    30.         margin:0px -2px 0px -2px; /* 外補丁 */
    31.         background-color:#EFEFEF; /* 定義背景色 */
    32.         position:absolute; /* 位置為絕對位置 */
    33.     }
    34.     .pmHorizo​​ntalBottomOut .level:hover .level_ .level_title {
    35.         /* 定義二級類別標題樣式 */
    36.         font-weight:bold; /* 字體加粗 */
    37.         background-color:#A7ADFE; /* 背景色 */
    38.         color:white; /* 文字顏色 */
    39.     }
    40.     .pmHorizo​​ntalBottomOut .level:hover .level_ a:hover {
    41.         /* 定義二級類別連結顯示樣式 */
    42.         background-color:#F83658; /* 背景色 */
    43.         color:white; /* 文字顏色 */
    44.     }
    45.     .pmHorizo​​ntalBottomOut .level_ * { 
    46.         /* 定義所有二級類別一般屬性 */
    47.         display:block; /* 以區塊顯示 */
    48.         color:black; /* 文字顏色 */
    49.         padding:0px 2px; /* 內補丁間隔 */
    50.     }
    51. /*]]>*/

    57.     
    58.         level
    59.         
    60.             level_ title
    61.             level_ 標題 1
    62.             level_ 標題 2
    63.             level_ 標題 3
    64.             level_ 標題 4
    65.             level_ 標題 5
    66.         
    67.     
    68.     
    69.         
      level 1
    70.         
    71.             level_ title
    72.             level_ 標題 1
    73.             level_ 標題 2
    74.             level_ title 3
    75. level_標題4
    76.             level_ 標題 5
    77.         
    78.     
    79.     
    80.         
      level 2
    81.         
    82.             level_ title
    83.             level_ 標題 1
    84.             level_ 標題 2
    85.             level_ 標題 3
    86.             level_ 標題 4
    87.             level_ 標題 5
    88.         
    89.     
    90.     
    91.         
      level 3
    92.         
    93.             level_ title
    94.             level_ 標題 1
    95.             level_ 標題 2
    96. level_ title 3
    97.             level_ 標題 4
    98.             level_ 標題 5
    99.         
    100.     
    101.     
    102.         
      level 4
    103.         
    104.             level_ title
    105.             level_ 標題 1
    106.             level_ 標題 2
    107.             level_ title 3
    108.             level_ 標題 4
    109.             level_ 標題 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.     .pmHorizo​​ntalBottomOut{background-color:#fff!important; /* 定義主選單域背景色 */} 
    11.     .pmHorizo​​ntalBottomOut .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.     .pmHorizo​​ntalBottomOut .level:hover { /* 當滑鼠劃過一級選單 */
    22.         background-color:#6633FF; /* 背景色 */
    23.         color:#FFFFFF; /* 文字顏色 */
    24.     }
    25.     .pmHorizo​​ntalBottomOut .level_{display:none; /* 預設隱藏二級類別 */}
    26.     
    27.     .pmHorizo​​ntalBottomOut .level:hover .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    28.         display:block; /* 以區塊顯示 */
    29.         width:124px; /* 寬度 */
    30.         height:auto; /* 高度 */
    31.         margin:0px -2px 0px -2px; /* 外補丁 */
    32.         background-color:#EFEFEF; /* 定義背景色 */
    33.         position:absolute; /* 位置為絕對位置 */
    34.     }
    35.     .pmHorizo​​ntalBottomOut .level:hover .level_ .level_title {
    36.         /* 定義二級類別標題樣式 */
    37.         font-weight:bold; /* 字體加粗 */
    38.         background-color:#A7ADFE; /* 背景色 */
    39.         color:white; /* 文字顏色 */
    40.     }
    41.     .pmHorizo​​ntalBottomOut .level:hover .level_ a:hover {
    42.         /* 定義二級類別連結顯示樣式 */
    43.         background-color:#F83658; /* 背景色 */
    44.         color:white; /* 文字顏色 */
    45.     }
    46.     .pmHorizo​​ntalBottomOut .level_ * { 
    47.         /* 定義所有二級類別一般屬性 */
    48.         display:block; /* 以區塊顯示 */
    49.         color:black; /* 文字顏色 */
    50.         padding:0px 2px; /* 內補丁間隔 */
    51.     }
    52.     /* ------------------ end 針對 Opera, Firefox 的 CSS 彈出式選單 ----------------- --*/
    53.     
    54.     /* ------------------- start 針對 IE 的 CSS 彈出式選單 -------------------- */
    55.     .levelIe{  /* 定義一級類別屬性 */
    56.         width:120px; /* 寬度 */
    57.         height:17; /* 高度 */
    58.         position:relative; /* 顯示位置為相對位置 */
    59.         display:block; /* 以區塊模式顯示 */
    60.         background-color:#D8D8D8; /* 背景色 */
    61.         padding:0px 2px; /* 文字內補丁間隔 */
    62.         margin:0px 1px 0px 0px; /* 選單外補丁間隔 */
    63.         float:left;
    64.     }
    65.     .levelIe { /* 當滑鼠劃過一級選單時 */
    66.         background-color:#6633FF; /* 背景色 */
    67.         color:#FFFFFF; /* 文字顏色 */
    68.     }
    69.     .levelIe .level_ { /* 滑鼠劃過時觸發顯示二級類別 */
    70.         display:block; /* 以區塊顯示 */
    71.         width:124px; /* 寬度 */
    72.         height:auto; /* 高度 */
    73.         margin:0px -2px 0px -2px; /* 外補丁 */
    74.         background-color:#EFEFEF; /* 定義背景色 */
    75.         position:absolute; /* 位置為絕對位置 */
    76.     }
    77.     .levelIe .level_ .level_title {
    78.         /* 定義二級類別標題樣式 */
    79.         font-weight:bold; /* 字體加粗 */
    80.         background-color:#A7ADFE; /* 背景色 */
    81.         color:white; /* 文字顏色 */
    82.     }
    83.     .levelIe .level_ a:hover {
    84.         /* 定義二級類別連結顯示樣式 */
    85.         background-color:#F83658; /* 背景色 */
    86.         color:white; /* 文字顏色 */
    87.     }
    88.     .levelIe .level_ * { 
    89.         /* 定義所有二級類別一般屬性 */
    90.         display:block; /* 以區塊顯示 */
    91.         color:black; /* 文字顏色 */
    92.         padding:0px 2px; /* 內補丁間隔 */
    93.     }
    94.     /* ------------------- end 針對 IE 的 CSS 彈出式選單 -------------------- */
    95. /*]]>*/
    98. //if (navigator.appName=="Microsoft Internet Explorer") {
    99.     function fPmHorizo​​ntalBottomOut() {
    100.         var getItem = document.getElementById("pmHorizo​​ntalBottomOut").getElementsByTagName("div");
    101.         for (var i=0; i            getItem[i].onmouseover=function() { 
    102.                 if(    this.className=="level"){
    103.                     this.className="levelIe";
    104.                 }
    105.             }
    106.             getItem[i].onmouseout=function() { 
    107.                 if(    this.className=="levelIe"){
    108.                     this.className="level";
    109.                 }
    110.             }//css彈出式選單腳本作者：shawl.qiu
    111.         }
    112.     }
    113.     window.onload=fPmHorizo​​ntalBottomOut;
    114. }
    115. //]]>

    121.     
    122.         level
    123.         
    124.             level_ title
    125.             level_ 標題 1
    126.             level_ 標題 2
    127.             level_ 標題 3
    128.             level_ 標題 4
    129.             level_ 標題 5
    130.         
    131.     
    132.     
    133.         
      level 1
    134.         
    135.             level_ title
    136.             level_ 標題 1
    137.             level_ 標題 2
    138.             level_ title 3
    139. level_標題4
    140.             level_ 標題 5
    141.         
    142.     
    143.     
    144.         
      level 2
    145.         
    146.             level_ title
    147.             level_ 標題 1
    148.             level_ 標題 2
    149.             level_ 標題 3
    150.             level_ 標題 4
    151.             level_ 標題 5
    152.         
    153.     
    154.     
    155.         
      level 3
    156.         
    157.             level_ title
    158.             level_ 標題 1
    159.             level_ 標題 2
    160. level_ title 3
    161.             level_ 標題 4
    162.             level_ 標題 5
    163.         
    164.     
    165.     
    166.         
      level 4
    167.         
    168.             level_ title
    169.             level_ 標題 1
    170.             level_ 標題 2
    171.             level_ title 3
    172.             level_ 標題 4
    173.             level_ 標題 5
    174.         
    175.     


    3.結論
    修改以上範例可以看出，如果已經編寫出了一個可用的CSS彈出選單範例，那就要編寫出彈出位置在其他位置的CSS彈出選單的話，只需小小一下就OK了。

    4。預覽

    4.1 1.2 相容 IE、Opera、Firefox 的 CSS 彈出式選單（腳本實作）的預覽
    陳述：
    本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
    上一篇：Lesson02_05 頭元素_基礎教程下一篇：Lesson02_05 頭元素_基礎教程

    相關文章

    看更多