垂直樹形多級導航選單程式碼例項

admin發表於2017-04-17

分享一段程式碼例項，它實現了垂直樹形多級導航選單。

更多導航選單效果可以查閱特效程式碼下載板塊，點選對應的分類即可。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
li a {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #999;
  padding-left: 2em;
}
.subMenu {
  display: none;
  margin-left: 1em;
}
.hasSub > a {
  display: block;
  background-image: url(a1.png);
  background-repeat: no-repeat;
  background-position: 10px center;
  color: #666;
}
.showSubmenu > a {
  background-position: 11px center;
  background-repeat: no-repeat;
}
.ac {
  color: #000 !important;
  background-color: #efefef;
}
  #tree {
  margin: 100px;
  width: 260px;
  padding: 10px;
  border: 1px solid #777;
}
</style>
<script>
window.onload = function() {
  var tree = document.getElementById('tree');
  var aLi = tree.getElementsByTagName('li');
  var aLi_a = tree.getElementsByTagName('a');
 
  for (var i = 0; i < aLi.length; i++) {
    //標記有二級選單的li------------------------------------
    var subMenu = aLi[i].children[1]; //判斷是否有二級選單
    if (subMenu) {
      subMenu.className = 'subMenu';
      aLi[i].className = "hasSub";
    };
    //繫結事件--------------------------------------------
    aLi[i].show = true; //給自己增加個判斷 開/關 自定義屬性
 
    aLi[i].onclick = function (ev) {
      var oEv = ev || window.event;
      oEv.cancelBubble = true; //阻止事件冒泡
 
      //開關 子選單--------------------
      var subMenu = this.children[1]; //是否有二級選單
      if (this.show) { //判斷開關狀態
        if (subMenu) {
          subMenu.style.display = "block";
          this.className = 'hasSub showSubmenu';
          this.show = false;
        }
      } else {
        subMenu.style.display = "none";
        this.className = 'hasSub';
        this.show = true;
      };
 
      //標記當前a標籤------------------
      for (var j = 0; j < aLi.length; j++) {
        aLi_a[j].className = '';
      };
      this.children[0].className = 'ac';
    };
  };
}
</script>
</head>
<body>
  <div id="tree">
    <ul class="tree">
      <li>
        <a href="javascript:;"><i></i>螞蟻部落一</a>
        <ul>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li>
            <a href="javascript:;">二級選單</a>
            <ul>
              <li>
                <a href="javascript:;">三級選單</a>
                <ul>
                  <li><a href="javascript:;">四級選單</a></li>
                  <li><a href="javascript:;">四級選單</a></li>
                  <li>
                    <a href="javascript:;">四級選單</a>
                    <ul>
                      <li><a href="javascript:;">五級選單</a></li>
                      <li><a href="javascript:;">五級選單</a></li>
                      <li><a href="javascript:;">五級選單</a></li>
                      <li><a href="javascript:;">五級選單</a></li>
                    </ul>
                  </li>
                  <li><a href="javascript:;">三級選單</a></li>
                </ul>
              </li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
            </ul>
 
          </li>
          <li><a href="javascript:;">二級選單</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;"><i></i>螞蟻部落二</a>
        <ul>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li>
            <a href="javascript:;">二級選單</a>
            <ul>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
            </ul>
          </li>
          <li><a href="javascript:;">二級選單</a></li>
        </ul>
      </li>
      <li>
        <a href="javascript:;">螞蟻部落三</a>
        <ul>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li><a href="javascript:;">二級選單</a></li>
          <li>
            <a href="javascript:;">二級選單</a>
            <ul class="subMenu">
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
              <li><a href="javascript:;">三級選單</a></li>
            </ul>
          </li>
          <li><a href="javascript:;">二級選單</a></li>
        </ul>
      </li>
      <li><a href="javascript:;">螞蟻部落四</a></li>
    </ul>
  </div>
</body>
</html>

相關文章