js實現三級選單的製作
阿新 • • 發佈：2019-01-08
HTML程式碼：
<body> <div class="navMenu"> <ul> <li><a href="#">首頁</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函式</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">語文</a> <ul> <li><a href="#">唐詩</a></li> <li><a href="#">宋詞</a></li> </ul> </li> <li><a href="#">英語</a></li> </ul> </li> <li><a href="#">課程大廳</a></li> <li><a href="#">學習中心+</a> <ul> <li><a href="#">JavaScript+</a> <ul> <li><a href="#">三角函式</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">語文</a> <ul> <li><a href="#">三角函式</a></li> <li><a href="#">矩形</a></li> </ul> </li> <li><a href="#">英語</a></li> </ul> </li> <li><a href="#">幫助</a></li> </ul> </div> </body>
css程式碼：
*{ padding:0; margin:0; } /*一級選單*/ .navMenu { width:570px; margin:0 auto; } .navMenu ul li{ float: left; position: relative; } li{ list-style: none; background-color: #eee; width: 140px; height: 40px; text-align: center; margin-right: 2px; margin-bottom: 2px; } ul li a{ line-height: 40px; text-align: center; font-size: 20px; color: #000; text-decoration: none; display: block; padding:0 10px; } /*二級選單*/ .navMenu ul li ul { display: none; position:absolute; left: 0; top:0; margin-top:42px; } .navMenu ul li ul li{ float:none; } /*三級選單*/ .navMenu ul li ul li ul{ display: none; left:140px; top:-42px; }
js程式碼：
<script type="text/javascript"> function addLoadEvent(func){ //func為將要繫結到window.onload上的函式； var oldonload=window.onload; //可能已經綁定了一些函式 if(typeof window.onload!='function'){ //如果在這個處理函式上還沒有繫結任何函式，就像平時那樣把新函式新增給它 window.onload=func(); } else{ //如果在這個處理函式上已經綁定了一些函式，就把新函式追加到現在指令的末尾 window.onload=function(){ oldonload(); func(); } } } function Hover(){ var Lis=document.getElementsByTagName("li"); for(var i= 0,len=Lis.length; i<len; i++){ Lis[i].onmouseover=function(){ var secondUl=this.getElementsByTagName("ul")[0]; if(secondUl!=undefined){ secondUl.style.display="block"; } this.style.backgroundColor="#0066FF"; } Lis[i].onmouseout=function(){ var secondUl=this.getElementsByTagName("ul")[0]; if(secondUl!=undefined){ secondUl.style.display="none"; } this.style.backgroundColor="#eee"; } } } addLoadEvent(Hover); </script>