jQuery 緩衝效果二級導航下拉選單

admin發表於2019-01-25
jQuery

二級下拉選單在大量企業或其他型別的網站都有應用，可以對內容進行分類和阻止。

下面通過程式碼例項介紹一下如何此效果，程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
html,body,ul,li,h1,h2,h3,h4,h5,h6,p,fieldset,legend{
  padding:0;
  margin:0;
}
ul,li{
  list-style-type:none;
  text-transform:capitalize;
}
#nav{
  margin:0 auto 60px;
  width:900px;
  display:block;
  font-size:12px;
}
#nav .mainlevel{
  background:#ffe60c;
  float:left;
  border-right:1px solid #fff;
  width:110px;
}
#nav .mainlevel a{
  color:#000;
  text-decoration:none;
  line-height:32px;
  display:block;
  padding:0 20px;
  width:110px;
}
#nav .mainlevel ul{
  display:none;
  position:absolute;
}
#nav .mainlevel li{
  border-top:1px solid #fff;
  background:#ffe60c;
  width:110px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $('li.mainlevel').mousemove(function(){
    $(this).find('ul').slideDown();
  });
  $('li.mainlevel').mouseleave(function(){
    $(this).find('ul').slideUp("fast");
  });
});
</script>
</head>
<body>
<div id="menu">
  <ul id="nav">
    <li class="mainlevel"><a href="#">螞蟻部落一</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <li class="mainlevel"><a href="#">螞蟻部落二</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <li class="mainlevel"><a href="#">螞蟻部落三</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <li class="mainlevel"><a href="#">螞蟻部落四</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <li class="mainlevel"><a href="#">螞蟻部落五</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <li class="mainlevel"><a href="#">螞蟻部落六</a>
      <ul>
        <li><a href="#">div+css教程</a></li>
        <li><a href="#">jquery教程</a></li>
        <li><a href="#">javascript教程</a></li>
        <li><a href="#">特效程式碼</a></li>
        <li><a href="#">談天說地</a></li>
        <li><a href="#">網站運營</a></li>
      </ul>
    </li>
    <div class="clear"></div>
  </ul>
</div>
</body>
</html>

滑鼠放在主導航上，二級下拉選單會以緩衝的方式下拉，實現過程如下：

一.實現原理:

預設狀態下二級選單是隱藏的，滑鼠懸浮在主導航上的時候，slideDown()函式將二級選單以動畫的方式顯示，當滑鼠離開的時候利用slideUp()函式以動畫方式將二級選單隱藏，具體可以參閱程式碼註釋。

二.程式碼註釋:

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

（2）.$('li.mainlevel').mousemove(function(){})，為class屬性值為mainlevel的li註冊mousemove事件處理函式。

（3）.$(this).find('ul').slideDown()，獲取當前li元素下ul元素，然後將其下拉顯示。

（4）.$('li.mainlevel').mouseleave(function(){})，為class屬性值為mainlevel的li註冊mouseleave事件處理函式。

（5）.$(this).find('ul').slideUp("fast")，獲取當前li元素下的ul元素，然後將其上卷隱藏。

相關文章