js垂直右側展開導航選單詳解

admin發表於2017-04-08
JS

本章節分享一段程式碼例項，它實現了滑鼠懸浮能夠在右側出現導航選單的效果。

這樣的效果在實際應用中也是比較常見的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.suckerdiv ul{
  width:120px; 
  position:relative; 
}
.suckerdiv ul li ul{
  left:120px;
  position:absolute; 
  width:140px;
  top:0; 
  display:none;
}
.suckerdiv ul li a{ 
  display:block; 
  color:#353302;
  text-decoration:none; 
  font:12px 宋體; 
  background:#eee; 
  line-height:24px; 
  padding:0px 10px; 
  border:1px solid #fff; 
  border-bottom:0; 
}
.suckerdiv ul li a:hover{
  color:white; 
  background-color:#97c839; 
}
.suckerdiv a.subfolderstyle:hover{
  background:#97c839; 
}
</style>
<script type="text/javascript">
var menuids = ["suckertree1"]
function buildsubmenus() {
  for (var index = 0; index < menuids.length; index++) {
    var ultags = document.getElementById(menuids[index]).getElementsByTagName("ul")
    for (var t = 0; t < ultags.length; t++) {
      ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"
      ultags[t].parentNode.onmouseover = function () {
        this.getElementsByTagName("ul")[0].style.display = "block";
      }
      ultags[t].parentNode.onmouseout = function () {
        this.getElementsByTagName("ul")[0].style.display = "none"
      }
    }
  }
}
window.onload=function(){
  buildsubmenus();
}
</script>
</head>
<body>
<div class="suckerdiv">
  <ul id="suckertree1">
    <li><a href="#">騰訊新聞</a></li>
    <li><a href="#">騰訊汽車</a></li>
    <li><a href="#">騰訊科技</a></li>
    <li>
      <a href="#">騰訊手機</a>
      <ul>
        <li><a href="#">HTC</a></li>
        <li><a href="#">聯想</a></li>
        <li><a href="#">華為</a></li>
        <li><a href="#">中興</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var menuids = ["suckertree1"]，將外層ul的id屬性值存入陣列。

（2）.function buildsubmenus() {}，此方法實現了選單功能。

（3）.for (var index = 0; index < menuids.length; index++) {}，遍歷陣列元素，當然這裡陣列中只有一個元素。

（4）.var ultags = document.getElementById(menuids[index]).getElementsByTagName("ul")，獲取二級ul元素集合。

（5）.for (var t = 0; t < ultags.length; t++) {}，遍歷集合中的每一個ul元素。

（6）.ultags[t].parentNode.getElementsByTagName("a")[0].className = "subfolderstyle"，將二級ul元素的父元素節點（li元素）下的第一個連結元素新增class樣式類"subfolderstyle"。和下面的這個css程式碼對應:

.suckerdiv a.subfolderstyle:hover{

  background:#97c839; 

}，這樣滑鼠懸浮的時候，就可以實現背景變色。


（7）.ultags[t].parentNode.onmouseover = function () {

  this.getElementsByTagName("ul")[0].style.display = "block";

}，註冊onmouseover事件處理函式，當滑鼠懸浮二級ul元素展現。

（8）.ultags[t].parentNode.onmouseout = function () {

  this.getElementsByTagName("ul")[0].style.display = "none"

}，註冊onmouseout 事件處理函式，當滑鼠離開，二級選單消失。

二.相關閱讀:

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

（2）.className屬性可以參閱js className一章節。

（3）.parentNode可以參閱parentNode一章節。

（4）.onmouseover事件可以參閱javascript mouseover事件一章節。

（5）.onmouseout事件可以參閱javascript mouseout事件一章節。

相關文章