效果圖
完整效果圖
一、HTML
<div class="wrapper">
<ul class="nav">
<li>
<a href="#">明星</a>
<ul class="detail">
<li><a href="#">胡歌</a></li>
<li><a href="#">黃曉明</a></li>
<li><a href="#">馬思純</a></li>
</ul>
</li>
<li>
<a href="#">演員</a>
<ul class="detail">
<li><a href="#">李幼斌</a></li>
<li><a href="#">何冰</a></li>
<li><a href="#">胡軍</a></li>
</ul>
</li>
<li>
<a href="#">歌手</a>
<ul class="detail">
<li><a href="#">蔡徐坤</a></li>
<li><a href="#">吳亦凡</a></li>
<li><a href="#">鹿晗</a></li>
</ul>
</li>
</ul>
</div>
二净嘀、CSS
CSS沒有什么报咳，只需要稍微關注一下提到的細節(jié)點就行了。
* {margin: 0px;padding: 0px;}
ul {list-style-type: none;}
a {text-decoration: none;color: black;}
.wrapper {width: 300px;}
.wrapper ul.nav::after {
content: "";
display: block;
clear: both;
}
.wrapper ul li {
height: 30px;
/* 此處height是功能實現的關鍵挖藏，固定高度height==line-hieght使得：
* 當ul.detail display時呈現overflow效果暑刃，不會額外占據地方，不會將wrapper撐大膜眠，
*/
float: left;
text-align: center;
font-size: 14px;
width: 100px;
line-height: 30px;
background-color: rgb(88, 187, 190);
cursor: pointer;
}
.wrapper ul li:hover{color: white;}
.wrapper ul li ul.detail {display: none;}
.wrapper ul li ul li {background-color: rgb(129, 221, 224);}
.wrapper ul li ul li:hover {background-color: rgb(178, 246, 248);}
細節(jié)點：
- 一級菜單是float：left稍走，因此需要使用偽元素after清除浮動流；
- .wrapper ul li 需要設置 height==line-height 柴底，使得當二級菜單顯示時不會講wrapper撐大婿脸，導致影響到后續(xù)元素的位置；固定height使得顯示的二級菜單成為overflow的那部分柄驻；效果對比如下：
-
height == line-height == 30px
height == line-height == 30px -
height未指定狐树，line-height==30px
height未指定，line-height==30px
-
三鸿脓、JQuery
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
// stop很重要抑钟，試驗了好久.......這種寫法算是比較滿意的動畫效果
$("div ul.nav>li").mouseenter(function () {
$(this).find(".detail").stop(true, true)
.show("fast");
}).mouseleave(function () {
$(this).find(".detail").hide("fast");
})
});
</script>
重點：
- JQuery中動畫隊列的消除涯曲，stop方法的應用；
- 直接使用不帶參數在塔，stop()方法會結束當前正字啊進行的動畫幻件，并立即執(zhí)行隊列中的下一個動畫。
- stop（）方法有兩個參數蛔溃，第一個參數clearQueue绰沥，將其設置為true，則會將當前元素接下來的尚未執(zhí)行完的動畫隊列都清空贺待。
- 第二個參數gotoEnd徽曲，將其設置為true，可以用于讓正在執(zhí)行的動畫直接到達結束時刻的狀態(tài)麸塞，通常用于后一個動畫需要基于前一個動畫的末狀態(tài)的情況秃臣。
- 網上很多代碼的處理都是直接使用
.stop().show("fast")以及.stop().hide("fast")但是在我暴力測試之下發(fā)現 有致命bug：在緩慢情況下能正常使用，在快速劃過時會出錯哪工。
stop()+stop() - 那么
.stop().show("fast")+.hide("fast")呢奥此？ 實驗表明也會有bug：
stop()+null - 那么
.stop(true).show("fast")+.stop(true).hide("fast")呢？有bug
.stop(true)+.stop(true) - 那么
.stop(true).show("fast")+.hide("fast")呢雁比？有bug
.stop(true)+null - 等等等等稚虎、、章贞、后續(xù)的就不在測試了..
- 最后我得到的最佳方法就是
.stop(true,true).show("fast")+.hide("fast"),效果最佳祥绞，無bug
.stop(true,true)+null
完整代碼：鏈接：https://pan.baidu.com/s/1BavI1UGR_PzUPMernS4xmg 提取碼：f0oa
本文為作者原創(chuàng)，未經允許鸭限，不得轉載蜕径，違者必究！
