jquery二級下拉導航選單詳解

螞蟻小編發表於2017-04-11
jQuery

本章節分享一段簡單的程式碼例項，它使用jquery實現了簡單的二級下拉導航選單效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{ 
  margin:0; 
  padding:0; 
} 
.nav{ 
  background-color:#EEEEEE; 
  height:40px; 
  width:450px; 
  margin:0 auto; 
} 
ul{ 
  list-style:none; 
} 
ul li{ 
  float:left; 
  line-height:40px; 
  text-align:center; 
} 
a{ 
  text-decoration:none; 
  color:#000000; 
  display:block; 
  width:90px; 
  height:40px; 
} 
a:hover{ 
  background-color:#666666; 
  color:#FFFFFF; 
} 
ul li ul li{ 
  float:none; 
  background-color:#EEEEEE; 
} 
ul li ul{ 
  display:none; 
} 
ul li ul li a:link,ul li ul li a:visited{ 
  background-color:#EEEEEE; 
} 
ul li ul li a:hover{ 
  background-color:#009933; 
} 
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function () {
  $(".navmenu").mouseover(function () {
    $(this).children("ul").show();
  })
  $(".navmenu").mouseout(function () {
    $(this).children("ul").hide();
  })
})
</script>
</head>
<body>
<div id="nav" class="nav">
  <ul>
    <li><a href="#">螞蟻部落</a></li>
    <li class="navmenu">
      <a href="#">前端教程</a>
      <ul>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </li>
    <li class="navmenu">
      <a href="#">特效下載</a>
      <ul>
        <li><a href="#">pc特效</a></li>
        <li><a href="#">移動特效</a></li>
        <li><a href="#">素材資料</a></li>
      </ul>
    </li>
    <li><a href="#">ES6教程</a></li>
    <li><a href="#">softwhy.com</a></li>
  </ul>
</div>
</body>
</html>

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

一.程式碼註釋:

（1）.$(function () {})，文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".navmenu").mouseover(function () {  

  $(this).children("ul").show();

})，註冊mouseover時間處理函式。

規定當滑鼠懸浮的時候，能夠將當前元素下面的ul元素顯示，也就是出現二級下拉選單。

（3）.$(".navmenu").mouseout(function () {

  $(this).children("ul").hide();

})，和上面同樣的道理。

規定滑鼠離開的時候，隱藏二級下拉選單。

二.相關閱讀:

（1）.mouseover可以參閱jQuery mouseover事件一章節。

（2）.children()可以參閱jQuery children()一章節。

（3）.mouseout可以參閱jQuery mouseout事件一章節。

相關文章