jquery模仿京東/天貓商品分類導航效果

如今天貓或者京東商品分類模塊的默認的效果是這樣的：

當鼠標滑過任意一欄導航分類時，就會出現相關詳細分類模塊，例如：

當鼠標移出藍色框之外的區域，就會恢復默認的效果顯示！然而使用jQuery的鼠標滑過事件，用得比較多的就是mouseover()和mouseout(),或者是他們兩個的整合hover();因此以前我也是用的這種方法，可是一直調整都調整不到想要的效果！後來靈光一現，想着使用一下mouseenter()和mouseleave();結果分分鐘想要的效果就出來了！

個人佈局大體是這樣的：

        <div class="nav_left">
            <div class="nav_top"></div>
            <div class="nav_tilte">所有商品分類</div> 
            <div class="dd">
                <div class="nav_list">
                    <div class="nav_list_s ">
                       <span class="nav_span"><a href="#">手機、</a><a href="#">數碼、</a><a href="#">京東通訊</a></span>
                       <i class="nav_arrow">></i>
                    </div>
                    <div class="nav_list_s">
                       <span class="nav_span"><a href="#">手機、</a><a href="#">數碼、</a><a href="#">京東通訊</a></span>
                       <i class="nav_arrow">></i>
                    </div>
                    <div class="nav_list_s">
                       <span class="nav_span"><a href="#">手機、</a><a href="#">數碼、</a><a href="#">京東通訊</a></span>
                       <i class="nav_arrow">></i>
                    </div>
       
                </div>
                              
                <div class="nav_detailBox">
                    <div class="nav_detail">
                        <a href="#">111詳細的子菜單，這裏就不寫了</a>
                       
                    </div>
                    <div class="nav_detail">
                        <a href="#">22222詳細的子菜單，這裏就不寫了</a>
                        
                    </div>
                    <div class="nav_detail">
                        <a href="#">3333詳細的子菜單，這裏就不寫了</a>
                       
                    </div>                          
                </div>
  
            </div>
 
        </div>

 

在nav_left的盒子裏有3塊大內容，分別是如圖的1,2,3，它們同屬於nav_left裏面，由於都屬於分類商品的內容，1和2至關因而裝飾展現的做用，把佈局排好就行

那麼重點是在第3個模塊，第三個模塊的大盒子這裏命名爲dd

在dd的盒子(也就是第3模塊)裏面，分別有左邊紅色背景的這個導航分類的大盒子(nav_list)3.1，和右邊鼠標滑過以後才顯示的白色背景的盒子（nav_detailBox）3.2，常常寫這種佈局的確定知道是用定位佈局才能實現，因此這裏也是用定位來實現的佈局。

佈局要和咱們的樣式相關聯繫，好比咱們默認樣式就是鼠標不滑過是默認的效果，鼠標滑過顯示的特殊效果，那就單獨寫一個樣式，經過jquery事件添加進去便可！

例如我這裏就有一個特殊的類nav_list_s01，添加上它這個類以後，鼠標滑過背景就是白色的。

 

當佈局和樣式徹底準備穩當以後，咱們就可使用jquery來實現以前想要的效果了：

$(".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就是鼠標滑過左邊的nav_list_s才顯示的大盒子，nav_detail就是這個大盒子裏的內容。

 

這個是本身想要寫這個效果的時候想到的方法，若是大神有更好的建議，洗耳恭聽哦！

若是本文幫助到你，記得推薦一下哦！