jQuery 淡入淡出效果下拉導航選單

admin發表於2019-01-24
jQuery

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

並且下拉選單在呈現過程中具有一定的淡入淡出效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
*{
  margin:0;
  padding:0;
}
body{font-size:14px;}
ul{
  margin:0;
  padding:0;
  list-style:none;
}
a{
  text-decoration:none;
  color:#000;
}
#wrap{
  position:relative;
  top:0px;
  width:876px;
  height:34px;
  line-height:34px;
  margin:0 auto;
}
ul#menu li{
  float:left;
  display:block;
  width:92px;
  height:37px;
  line-height:37px;
  text-align:center;
  margin-right:2px;
}
ul#menu li a:link{
  display:block;
  background:#EDEBEC;
  font-size:14px;
  color:#333;
  width:92px;
  height:37px;
  line-height:37px;
}
ul#menu li a:hover,.red{
  background:#CE070E!important;
  color:#FFF!important;
}
/*子選單*/
ul#menu li ul{
  position:absolute;
  top:37px;
  width:90px;
  display:none;
  border:1px #CE070E solid;
  border-top:none;
  background:#FFF;
}
ul#menu li ul li{float:left;}
ul#menu li ul li a:link{
  width:90px;
  height:37px;
  line-height:37px;
  background:#FFF;
}
ul#menu li ul li a:hover{
  color:#CE070E;
  text-decoration:underline
}
ul#menu li ul li{
  width:90px;
  height:37px;
  line-height:37px;
  float:left;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script type="text/javascript" language="javascript"> 
$(function(){
  $("ul#menu>li:has(ul)").hover(function(){ 
    $(this).children('a').addClass('red').end().find('ul').fadeIn(400);
  },
  function(){
    $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);
  });
});
</script>
</head>
<body>
<div id="wrap">
  <ul id="menu">
    <li><a href="#" >網站首頁</a></li>
    <li>
      <a href="#" >最新動態頁</a>
      <ul>
        <li><a href="#">原始碼愛好者</a></li>
        <li><a href="#">螞蟻部落</a></li>
        <li><a href="#">網頁特效</a></li>
      </ul>
    </li>
    <li><a href="#" >產品預定</a></li>
    <li>
      <a href="#" >幫助查詢</a>
      <ul>
        <li><a href="#">時速快遞</a> | </li>
        <li><a href="#">太空一號</a> | </li>
        <li><a href="#">softwhy.com</a> | </li>
        <li><a href="#">未來戰士</a> | </li>
        <li><a href="#">蟒蛇之災</a></li> 
      </ul>
    </li>
    <li><a href="#" >會員俱樂部</a></li>
    <li><a href="#" >凱撒論壇</a></li>
  </ul> 
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.$("ul#menu>li:has(ul)").hover(function(){}，function(){}),id屬性值為menu的ul元素下的li元素如果包含ul元素，那麼就為其註冊hover事件處理函式。

（3）.$(this).children('a').addClass('red').end().find('ul').fadeIn(400)，為當前li元素下的連結a子元素新增class屬性red，也就是連結會變紅，關於end()的作用可以參閱相關閱讀，然後將ul元素進行淡入動畫方式展現。

（4）.function(){

  $(this).children('a').removeClass('red').end().find('ul').fadeOut(400);

})，這個的作用恰好和上面的程式碼想法。

二.相關閱讀:

（1）.:has()選擇器參閱jQuery :has一章節。

（2）.hover()參閱jQuery hover事件一章節。

（3）.children()參閱jQuery children()一章節。

（4）.addClass()參閱jQuery addClass()一章節。

（5）.end()參閱jQuery end()一章節。

（6）.find()參閱jQuery find()一章節。

（7）.fadeIn()參閱jQuery fadeIn()一章節。

相關文章