<div class="codetitle"> <span><a style="CURSOR: pointer" data="93337" class="copybut" id="copybut93337" onclick="doCopy('code93337')"><u>複製代碼</u></a></span> 代碼如下:</div> <div class="codebody" id="code93337"> <br>//W3C/1. Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br> <br> <br><title>伸縮的選單</title> <br><style> <BR><!-- <BR>body{ <BR>background-color:#ffdee0; <BR>} <BR>#navigation { <BR>width:200px <BR>#navigation { <BR>width:200px; 🎜>font-family:Arial; <BR>} <BR>#navigation > ul { <BR>list-style-type:none;/* 不顯示項目符號*/ <BR>margin:0px; <BR>padding :0px; <BR>} <BR>#navigation > ul > li { <BR>border-bottom:1px solid #ED9F9F;/* 新增底線*/ <BR>} <BR>#navigation > ul > li > a { <BR>display:block;/* 區塊顯示*/ <BR>padding:5px 5px 5px 0.5em; <BR>text-decoration:none; <BR>border-left:12px solid #711515;左邊*的粗紅邊*/ <BR>border-right:1px solid #711515;/* 右側陰影*/ <BR>} <BR>#navigation > ul > li > a:link, #navigation > ul > li > a:visited{ <BR>background-color:#c11136; <BR>color:#FFFFFF; <BR>} <BR>#navigation > ul > li > a:hover{ /* 老鼠經過時*/ <BR> background-color:#990020;/* 改變背景色*/ <BR>color:#ffff00;/* 改變文字顏色*/ <br>} <br><BR><BR>/* 子選單的CSS樣式* / <BR>#navigation ul li ul{ <BR>list-style-type:none; <BR>margin:0px; <BR>padding:0px 0px 0px 0px; <BR>} <BR>#lioo li{ <BR>border-top:1px solid #ED9F9F; <BR>} <BR>#navigation ul li ul li a{ <BR>display:block; <BR>padding:3px 3px 3px 0.5em>; text-decoration:none; <BR>border-left:28px solid #a71f1f; <BR>border-right:1px solid #711515; <BR>} <BR>#navigation ul li ul liation link,,nav #ul li ul li a:visited{ <BR>background-color:#e85070; <BR>color:#FFFFFF; <BR>} <BR>#navigation ul li ul li a:hover{ <BR>background-color:# c2425d; <BR>color:#ffff00; <BR>} <BR>#navigation ul li ul.myHide{ /* 隱藏子選單*/ <BR>display:none; <BR>} <BR>>> 但ul.myShow{ /* 顯示子選單*/ <BR>display:block; <BR>} <BR>--> <BR></style> <br><script language="javascript"> <BR>function change(){ <BR>//透過父元素li，找出兄弟元素ul <BR>var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0]; <BR>//CSS交替更換來實現顯、隱<BR>if(oSecondDiv.className == "myHide") <BR>oSecondDiv.className = "myShow"; <BR>else <BR>oSecondDiv.className = "myHide"; <BR>} <BR>window. onload = function(){ <BR>var oUl = document.getElementById("listUL"); <BR>var aLi = oUl.childNodes;//子元素<BR>var oA; <BR>for(var i=0 ;i<aLi.length;i ){ <BR>//如果子元素為li，且這個li有子選單ul <BR>if(aLi[i].tagName == "LI" && aLi[i]. getElementsByTagName("ul").length){ <BR>oA = aLi[i].firstChild;//找到超連結<BR>oA.onclick = change;//動態新增點擊函數<BR>} <BR>} <BR>} <BR></script> <br> <br> <br><div id="navigation"> <br><ul id="listUL"> <br><a href="#">Home</a> <br><li> <a href="#">News</a> <br><ul class="myHide"> <br><li><a href="#">Lastest News</a></li> <br><li><a href="#">All News</a></li> <br> </ul> <br> </li> <br><li> <a href="#">Sports</a> <br><ul class="myHide"> <br><li><a href="#">Basketball</a></li> <br><li><a href="#">Football</a></li> <br><li><a href="#">Volleyball</a></li> <br> </ul> <br> </li> <br><li> <a href="#">Weather</a> <br><ul class="myHide"> <br><li><a href="#">Today's Weather</a></li> <br><li><a href="#">Forecast</a></li> <br> </ul> <br> </li> <br><li><a href="#">Contact Me</a></li> <br> </ul> <br> <br> <br> <br> </div> </div>
