带动画效果的下拉菜单
这个效果好久都想做的，但是能力有限。今天看到一个动画实例受到启发，就把它做出来了。
它能够适应下拉菜单的高度，可能还不那么完善。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title></title> 6 <style type="text/css"> 7 * { margin:0; padding:0; } 8 ul { list-style:none; } 9 #menu { background:#eee; border-radius:5px; border:#ccc solid 1px; width:200px; margin:50px auto; font-size:12px; } 10 #menu dt { background:#ddd; height:30px; line-height:30px; padding-left:10px; font-weight:bold; border-bottom:#ccc solid 1px; cursor:pointer; } 11 #menu dd { overflow:hidden; } 12 #menu dd ul { padding-bottom:5px; } 13 #menu li { padding-left:10px; line-height:20px; height:20px; color:#333; } 14 </style> 15 </head> 16 <body> 17 <dl id="menu"> 18 <dt>基础保养</dt> 19 <dd> 20 <ul> 21 <li>面霜</li> 22 <li>乳液</li> 23 <li>凝露</li> 24 <li>精华</li> 25 <li>原液</li> 26 <li>面膜</li> 27 </ul> 28 </dd> 29 <dt>肌肤需求</dt> 30 <dd class="none"> 31 <ul> 32 <li>美白抗氧</li> 33 <li>保湿补水</li> 34 <li>祛痘除印</li> 35 <li>紧肤抗衰</li> 36 <li>淡斑祛疤</li> 37 <li>黑头毛孔</li> 38 <li>美白抗氧</li> 39 <li>保湿补水</li> 40 <li>祛痘除印</li> 41 </ul> 42 </dd> 43 <dt>适用人群</dt> 44 <dd class="none"> 45 <ul> 46 <li>青春少女</li> 47 <li>职业女性</li> 48 <li>精致女人</li> 49 <li>干性肌肤</li> 50 <li>油性肌肤</li> 51 <li>敏感肌肤</li> 52 </ul> 53 </dd> 54 </dl> 55 <script type="text/javascript"> 56 var oDt = document.getElementById("menu").getElementsByTagName("dt"); 57 var oDd = document.getElementById("menu").getElementsByTagName("dd"); 58 var ddHeight = []; 59 var timer = null; 60 for(var i=0; i<oDd.length; i++) { 61 ddHeight.push(oDd[i].offsetHeight); 62 if(oDd[i].className === "none") { 63 oDd[i].style.height = 0 + "px"; 64 } 65 } 66 for(var i=0; i<oDt.length; i++) { 67 oDt[i].index = i; 68 oDt[i].onclick = showMenu; 69 } 70 function showMenu() { 71 var newHeight = 0; 72 var maxH = ddHeight[this.index]; 73 var thisDd = this.nextSibling.nextSibling; 74 if(thisDd.offsetHeight != 0) { 75 return true; 76 } 77 for(var j=0; j<oDd.length; j++) { 78 oDd[j].style.height = 0 + "px"; 79 } 80 timer = setInterval(function() { 81 thisDd.style.height = thisDd.offsetHeight + 10 + "px"; 82 if(thisDd.offsetHeight >= maxH) { 83 clearInterval(timer); 84 } 85 },20); 86 } 87 </script> 88 </body> 89 </html>
