JavaScript橫向二級導航選單效果

admin發表於2018-07-10
JavaScript

關於導航選單的更多內容可以導航選單版塊去下載。

比較常見的選單有二級下拉選單或者側欄選單，本章節分享一段橫向二級導航選單，並介紹一下他的實現過程。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#dNavBar{
  background-color:#ffffff;
}
#dNavBar li{
  list-style-type:none;
  float:left;
  width:84px;
  height:28px;
  line-height:28px;
  font-size:12px;
  color:#FFFFFF;
  border:1px solid #ffffff;
  background:#86C2FF;
  text-align:center;
  display:block;
  cursor:pointer;
}
#subMenu{
  background:#99cc66;
  width:500px;
  border-left:1px solid #ffffff;
  border-right:1px solid #ffffff;
  height:29px;
  line-height:29px;
  color:#FFFFFF;
  font-size:12px;
  padding-left:10px;
}
body{margin:0px;}
a:link,a:visited{
  color:#FFFFFF;
  text-decoration:none;
}
a:hover{
  color:#FFFFFF;
  text-decoration:none;
}
</style>
<script>
function ShowMenu(){
  var barCTT=document.getElementById("dNavBar")
  var liArr=barCTT.getElementsByTagName("li")
  var links=new Array()
  links[0]="<a href='#'>當前位置：首頁"
  links[1]="<a href='#'>css教程</a> | <a href='#'>div教程</a> | <a href='#'>json教程</a>"
  links[2]="<a href='#'>js特效</a> | <a href='#'>jquery特效</a> | <a href='#'>css3特效</a>"
  links[3]="<a href='#'>站長交流</a> | <a href='#'>seo優化</a> | <a href='#'>經驗分享</a>"
  for (var index=0;index<liArr.length;index++){
    liArr[index].onclick=function(){
      selectThis(this,liArr,links)
    }
  }
}
function selectThis(indexObj,allLi,infoArr){
  var index=0;
  for (y=0;y<allLi.length;y++){
    allLi[y].style.border="1px solid #ffffff";
    allLi[y].style.backgroundColor="#86C2FF";
    allLi[y].style.height="28px";
    if(indexObj==allLi[y]){
      index=y;
    }
  }
  indexObj.style.borderBottom="0px solid #666688";
  indexObj.style.backgroundColor="#99cc66";
  indexObj.style.height="31px";
  document.getElementById("subMenu").innerHTML=infoArr[index];
}
window.onload=function(){
  ShowMenu()
}
</script>
<body>
<div id="dNavBar" style="float:none; width:560px;">
  <li>首頁</li>
  <li>前端專區</li>
  <li>下載專區</li>
  <li>seo專區</li>
</div>
<div id="subMenu">螞蟻部落</div>
</body>
</html>

上面的程式碼實現了我們的要求，點選主導航可以在右側顯示出二級導航來。

一.程式碼註釋:

（1）.function ShowMenu(){}，此函式可以做一些相關的準備工作，具體內容下面會做介紹。

（2）.var barCTT=document.getElementById("dNavBar")，獲取id屬性值為dNavBar的元素。

（3）.var liArr=barCTT.getElementsByTagName("li"),獲取barCTT元素下的所有li元素物件集合。

（4）.var links=new Array()，宣告一個陣列，用來儲存二級導航選單，每一個陣列元素對應一個主導航。

（5）.for (var index=0;index<liArr.length;index++)，遍歷li元素集合中的每一個元素。

（6）.liArr[index].onclick=function(){

  selectThis(this,liArr,links)

}，然後為每一個li元素註冊onclick事件處理函式，事件處理函式會呼叫selectThis()函式。

（7）.function selectThis(indexObj,allLi,infoArr){}，此函式可以實現定義當前li元素的一些樣式，第一個引數是當前點選的li元素物件，第二個引數是li元素集合，第三個引數是二級導航選單陣列。

（8）.var index=0，宣告一個變數並賦值為0，其實用來確定陣列的索引。

（9）.for (y=0;y<allLi.length;y++),遍歷集合中的每一個元素。

（10）.allLi[y].style.border="1px solid #ffffff"，設定li元素的邊框。

（11）.allLi[y].style.backgroundColor="#86C2FF"，設定li元素的背景色。

（12）.allLi[y].style.height="28px"，設定li元素的高度。

（13）.if(indexObj==allLi[y]){

  index=y;

}，如果是當前點選的li元素，那麼將y的值賦值給index。

（14）.indexObj.style.borderBottom="0px solid #666688"，設定當前li元素的下邊框。

（15）.indexObj.style.backgroundColor="#99cc66"，設定當前li元素的背景色。

（16）.indexObj.style.height="31px"，設定當前li元素的高度。

（17）.document.getElementById("subMenu").innerHTML=infoArr[index]，設定二級導航選單。

二.相關閱讀:

（1）.document.getElementsByTagName()參閱document.getElementsByTagName()一章節。 

（2）.innerHTML屬性參閱js innerHTML一章節。

相關文章