現(xiàn)在天貓或者京東商品分類(lèi)模塊的默認(rèn)的效果是這樣的：

當(dāng)鼠標(biāo)滑過(guò)任意一欄導(dǎo)航分類(lèi)時(shí)，就會(huì)出現(xiàn)相關(guān)詳細(xì)分類(lèi)模塊，例如：

當(dāng)鼠標(biāo)移出藍(lán)色框以外的區(qū)域，就會(huì)恢復(fù)默認(rèn)的效果顯示！然而使用jQuery的鼠標(biāo)滑過(guò)事件，用得比較多的就是mouseover()和mouseout(),或者是他們兩個(gè)的整合hover();所以之前我也是用的這種方法，但是一直調(diào)整都調(diào)整不到想要的效果！后來(lái)靈光一現(xiàn)，想著使用一下mouseenter()和mouseleave();結(jié)果分分鐘想要的效果就出來(lái)了！

我的布局大致是這樣的：

<div class="nav_left">
<div class="nav_top"></div>
<div class="nav_tilte">全部商品分類(lèi)</div>
<div class="dd">
<div class="nav_list">
<div class="nav_list_s ">
<span class="nav_span"><a href="#">手機(jī)、</a><a href="#">數(shù)碼、</a><a href="#">京東通信</a></span>
<i class="nav_arrow">></i>
</div>
<div class="nav_list_s">
<span class="nav_span"><a href="#">手機(jī)、</a><a href="#">數(shù)碼、</a><a href="#">京東通信</a></span>
<i class="nav_arrow">></i>
</div>
<div class="nav_list_s">
<span class="nav_span"><a href="#">手機(jī)、</a><a href="#">數(shù)碼、</a><a href="#">京東通信</a></span>
<i class="nav_arrow">></i>
</div>
</div>
<div class="nav_detailBox">
<div class="nav_detail">
<a href="#">111詳細(xì)的子菜單，這里就不寫(xiě)了</a>
</div>
<div class="nav_detail">
<a href="#">22222詳細(xì)的子菜單，這里就不寫(xiě)了</a>
</div>
<div class="nav_detail">
<a href="#">3333詳細(xì)的子菜單，這里就不寫(xiě)了</a>
</div> 
</div>
</div>
</div>

在nav_left的盒子里有3塊大內(nèi)容，分別是如圖的1,2,3，它們同屬于nav_left里面，因?yàn)槎紝儆诜诸?lèi)商品的內(nèi)容，1和2相當(dāng)于是裝飾展示的作用，把布局排好就行

那么重點(diǎn)是在第3個(gè)模塊，第三個(gè)模塊的大盒子這里命名為dd

在dd的盒子(也就是第3模塊)里面，分別有左邊紅色背景的這個(gè)導(dǎo)航分類(lèi)的大盒子(nav_list)3.1，和右邊鼠標(biāo)滑過(guò)之后才顯示的白色背景的盒子（nav_detailBox）3.2，經(jīng)常寫(xiě)這種布局的肯定知道是用定位布局才能實(shí)現(xiàn)，所以這里也是用定位來(lái)實(shí)現(xiàn)的布局。

布局要和我們的樣式相關(guān)聯(lián)系，比如我們默認(rèn)樣式就是鼠標(biāo)不滑過(guò)是默認(rèn)的效果，鼠標(biāo)滑過(guò)顯示的特殊效果，那就單獨(dú)寫(xiě)一個(gè)樣式，通過(guò)jquery事件添加進(jìn)去即可！

例如我這里就有一個(gè)特殊的類(lèi)nav_list_s01，添加上它這個(gè)類(lèi)之后，鼠標(biāo)滑過(guò)背景就是白色的。

當(dāng)布局和樣式完全準(zhǔn)備妥當(dāng)之后，我們就可以使用jquery來(lái)實(shí)現(xiàn)之前想要的效果了：

$(".nav_list_s").mouseenter(function(){
$(this).addClass("nav_list_s01").siblings().removeClass("nav_list_s01");
$(".nav_detailBox").show();
$(".nav_detailBox").children(".nav_detail").eq($(this).index()).show().siblings().hide();
})
$(".nav_left").mouseleave(function(){
$(this).find(".nav_list_s").removeClass("nav_list_s01");
$(".nav_detailBox").stop().hide();
})

之前給出的大致布局也可以看出，nav_list_s是這些盒子

nav_detailBox就是鼠標(biāo)滑過(guò)左邊的nav_list_s才顯示的大盒子，nav_detail就是這個(gè)大盒子里的內(nèi)容。

以上所述是小編給大家介紹的jQuery模仿京東/天貓商品左側(cè)分類(lèi)導(dǎo)航菜單效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持

最新評(píng)論