首頁 > 開發者 > JavaScript
簡單的單級下拉式功能表實現，級下拉式功能表
效果預覽
這裡用純CSS實現一個簡單的單級下拉式功能表，滑鼠划過功能表標題時顯示下拉式功能表。
基本思路在菜單處於游標之下時顯示菜單，其餘時候隱藏。這個過程首先得想到 :hover 偽類來實現，但是直接的利用偽類還不行，因為普通狀態下菜單隱藏了，沒辦法觸發 :hover ，不過下拉式功能表隱藏了不是還有功能表標題麼，功能表標題處於游標之下時顯示菜單就能夠顯示出來了，但是滑鼠移到菜單上的時候下拉式功能表又會消失，這個時候想到給下拉式功能表也加上 :hover 顯示自身，但是萬一腦洞大開，要做分體菜單怎麼辦，這個時候把它放進一個容器唄，利用標籤的嵌套關係，去給容器的 :hover 偽類的衍生元素寫樣式就一切搞定啦。
上HTML結構1 <ul id="dropdown-wrapper"> 2 <li> 3 <span>Rewrite</span> 4 <ul class="dropdown-sublist"> 5 <li>Kotarou</li> 6 <li>Kotori</li> 7 <li>Akane</li> 8 <li>Kagari</li> 9 <li>Lucia</li>10 <li>Shizuru</li>11 <li>Chihaya</li>12 </ul>13 </li>14 <li>15 <span>Clannad</span>16 <ul class="dropdown-sublist">17 <li>Tomoya</li>18 <li>Nagisa</li>19 <li>Ushio</li>20 <li>Ryou</li>21 <li>Kyou</li>22 <li>Yukine</li>23 <li>Fuko</li>24 <li>Tomoyo</li>25 <li>Kotomi</li>26 </ul>27 </li>28 <li>29 <span>Air</span>30 <ul class="dropdown-sublist">31 <li>Yukito</li>32 <li>Misuzu</li>33 <li>Kano</li>34 <li>Minagi</li>35 </ul>36 </li>37 </ul>
CSS
實現的關鍵就在那些打驚歎號的規則,寫好顯示與不顯示時兩個狀態的下拉式功能表的屬性。同時添加了一些漸層以及平移讓菜單顯示更加自然。
1 body{ margin:0; padding:0; 2 3 font-size:18px; 4 5 background-color:#aaa; 6 } 7 h1{margin:2em 0.4em 0 0.4em;color:#eee;font-size:3em;} 8 #dropdown-wrapper{ 9 display:block;10 11 margin:4em 1em 0 1em;12 }13 #dropdown-wrapper li{14 /*！！！！！！！！！！！！*/15 display:inline-table;16 padding:0;17 margin:0;18 19 position:relative;20 21 width:10em;22 23 background:#fff;24 25 -webkit-transition:all ease-in-out 0.3s;26 transition:all ease-in-out 0.3s;27 }28 #dropdown-wrapper span{29 display:block;30 padding:0.4em 1em;31 width:10em;32 color:#333;33 }34 #dropdown-wrapper span:after{35 display:inline-block;36 float:right;37 content:">";38 39 -webkit-transform:rotate(0deg);40 transform:rotate(0deg);/*為了漸層*/41 42 -webkit-transition:all ease-in-out 0.3s;43 transition:all ease-in-out 0.3s;44 }45 #dropdown-wrapper li:hover span:after{46 -webkit-transform:rotate(90deg);47 transform:rotate(90deg);/*划過的時候那個右箭頭旋轉90度，變成朝下的啦*/48 }49 #dropdown-wrapper li ul{50 /*！！！！！！！！！！！！*/51 display:block;52 position:absolute;53 54 padding:0;55 margin:0;56 57 height:0;/*平時的時候隱藏下拉式清單*/58 line-height:0;/*0行高，這個的作用是用來製造一個文字展開的效果*/59 overflow:hidden;60 61 color:#555;62 63 opacity:0;64 65 -webkit-transform:translateY(-1em);66 transform: translateY(-1em);67 68 -webkit-transition:all ease-in-out 0.3s;69 transition:all ease-in-out 0.3s;70 }71 #dropdown-wrapper li ul>li{72 padding:0.7em 1em;73 74 }75 #dropdown-wrapper li:hover ul{76 /*！！！！！！！！！！！！*/77 /*這是容器處於游標下時的下拉式清單的狀態，78 *這個時候就是要做的就是顯示下拉式功能表咯79 */80 opacity:1;81 height:auto;82 line-height:1em;83 84 -webkit-transform: translaY(0);85 transform: translateY(0);86 }87 #dropdown-wrapper li:hover span{88 color:rgb(0,173,238);89 }90 #dropdown-wrapper li:hover ul>li:hover{91 background:rgb(0,173,238);92 color:#eee;93 }
已經過IE6，Opera測試，把下面代碼複製粘貼到文字檔，改尾碼為.html，雙擊即可看到效果，運行時要能上網，除非你把jquery-1.5.2.min.js下載到本地
<html xmlns="www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<style>
body{background:#000;margin:0;padding:0;}
ul,li,hr{margin:0;padding:0;float:left;list-style:none;}
a{font-size:12px;font-weight:normal;font-family:"宋體";color:#999;text-decoration:none;text-
align:center;}
a:hover{color:orange;}
#nav{height:32px;background:#eee;width:100%;}
#nav a,#nav a.hover{width:88px;height:32px;float:left;color:#444;font:12px;font-weight:bold;font
-family:tahoma;text-decoration:none;line-height:32px;text-align:center;display:block;border-
right:1px solid #f5f2f0;border-left:1px solid #e0e0e0;}
#nav a:hover,#nav a.hover{background:orange;color:#fff;}
hr{width:100%;height:0px;border:none;border-top:1px solid #fff;overflow:hidden;font-
size:1px;display:block;clear:both;
line-height:1px;}
*html hr{margin-bottom:-14px;}
hr.h1{border-color:#777;}
hr.h2{border-color:#555;}
hr.h3{border-color:#333;}
#cbox{position:absolute;top:32px;left:0;}
#cbox ul{width:150px;background:#333;position:absolute;display:none;}
#cbox ul li{display:block;}
#cbox ul......餘下全文>>
簡易三級下拉式功能表的CSS代碼最好有DIV的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/...al.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三級dropdown快顯功能表</title>
<style type="text/css">
/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul ......餘下全文>>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
