JavaScript滑鼠懸浮出現下拉選單效果

admin發表於2018-07-25
JavaScript

本章節分享一段程式碼例項，它實現了滑鼠懸浮出現下拉選單效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body{
  font-family:Verdana; 
  font-size:12px; 
  line-height:1.5;
}
a{
  color:#000; 
  text-decoration:none;
}
a:hover{ 
  color:#F00; 
}
#menu{ 
  width:500px;
  height:28px; 
  margin:0 auto; 
  border-bottom:3px solid #E10001;
}
#menu ul{
  list-style:none; 
  margin:0px; 
  padding:0px;
}
#menu ul li{ 
  float:left; 
  margin-left:2px;
}
#menu ul li a{ 
  display:block; 
  width:87px; 
  height:28px; 
  line-height:28px; 
  text-align:center; 
  font-size:14px;
}
#menu ul li a#current{ 
  font-weight:bold; 
  color:#fff;
}
#menu ul li ul{ 
  border:1px solid #ccc; 
  display:none; 
  position:absolute;
}
#menu ul li ul li{ 
  float:none; 
  width:87px; 
  background:#eee; 
  margin:0;
}
#menu ul li ul li a{ 
  background:none;
}
#menu ul li ul li a:hover{ 
  background:#333; 
  color:#fff;
}
#menu ul li:hover ul{ 
  display:block;
}
#menu ul li.sfhover ul{ 
  display:block;
}
</style>
<script type="text/javascript">
function menuFix(){
  var sfEls=document.getElementById("menu").getElementsByTagName("li");
  for (var index=0;index<sfEls.length;index++){
    sfEls[index].onmouseover=function(){
      this.className+=(this.className.length > 0 ? " " : "") + "sfhover";
    }
    sfEls[index].onmouseout=function(){
      this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
    }
  }
}
window.onload = menuFix;
</script>
</head>
<body>
<div id="menu">
  <ul>
    <li><a id="current" href="#">首頁</a></li>
    <li>
      <a href="#">網頁版式</a>
      <ul>
        <li><a href="#">自適應寬度</a></li>
        <li><a href="#">固定寬度</a></li>
      </ul>
    </li>
    <li>
      <a href="#">web教程</a>
      <ul>
        <li><a href="#">新手入門</a></li>
        <li><a href="#">softwhy.com</a></li>
        <li><a href="#">常見問題</a></li>
      </ul>
    </li>
    <li><a href="#">web例項</a></li>
    <li><a href="#">常用程式碼</a></li>
  </ul>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.function menuFix(){}，此方法是onload事件處理函式。

（2）.var sfEls=document.getElementById("menu").getElementsByTagName("li")，獲取li元素集合。

（3）.for (var index=0;index<sfEls.length;index++){}，遍歷每一個li元素集合。

（4）.sfEls[index].onmouseover=function(){  this.className+=(this.className.length > 0 ? " " : "") + "sfhover";

}，為當前li元素註冊onmouseover時間處理函式。如果當前li元素具有class屬性，那麼後面加個空格再連線上"sfhover"，如果沒有class屬性值，那麼就連結一個空字串，再連線上"sfhover"。其實就是這種形式class="a"，如果再新增class類b的話，只能在a後面加一個空格，class="a b"。又因為樣式表中有如下程式碼:

#menu ul li.sfhover ul{ 

  display:block;

},所以二級導航選單會顯示。

（5）.sfEls[index].onmouseout=function(){

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");

}，當滑鼠離開的時候，就會把演示類中的sfhover替換為空，當然二級選單就會隱藏。

二.相關閱讀:

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

（2）.onmouseover事件參閱javascript mouseover事件一章節。

（3）.className參閱js className一章節。

（4）.onmouseout事件參閱javascript mouseout事件一章節。

（5）.replace()參閱正規表示式replace()一章節。

相關文章