這個效果是第十二期代碼培訓(xùn)課程里面作為案例演示的。然后放到了店鋪里面，群里很多小伙伴看到覺得喜歡。
所以這里米色免費(fèi)將源碼分享出來。有喜歡的小伙伴 可以自己去測試下。

一：效果演示

二：源碼分享

/*====整體導(dǎo)航====*/

.skin-box-bd,.all-cats,.all-cats .link,.skin-box-bd .menu-list,.skin-box-bd .menu-list .menu,.skin-box-bd .menu-list .link,.skin-box-bd .menu-list .menu-selected .link .title {background: transparent;}

.skin-box-bd {font-family:microsoft yahei;background:#c7a462;width: 1200px; padding:0 360px;position: relative; left: -485px;}

.skin-box-bd,.all-cats,.all-cats .link,.skin-box-bd .all-cats .title,.skin-box-bd .menu-list,.skin-box-bd .menu-list .menu,.skin-box-bd .menu-list .link,.skin-box-bd .menu-list .menu .title { height:70px; line-height:70px;}

.all-cats {_width: 125px;max-width: 125px; background-image:url(https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png);}

.all-cats .link { width: 85px;}

.skin-box-bd .all-cats .title {color: transparent;}

/*====右側(cè)分類導(dǎo)航====*/

.skin-box-bd .menu-list { float:right;width: auto;}

.skin-box-bd .menu-list .menu .title {background-image:url(https://img.alicdn.com/imgextra/i4/675431384/TB2exVtj3RkpuFjy1zeXXc.6FXa_!!675431384.gif); background-repeat:no-repeat; background-position:-150px 50px; color:#fff;}

.skin-box-bd .menu-list .menu .title:hover {background-position:left 50px; color:#000;}

.skin-box-bd .menu-list .menu,.all-cats .link {border: 0;}

/*小圖標(biāo)-主要是配合導(dǎo)航效果，對圖標(biāo)位置做了調(diào)整*/

.skin-box-bd .all-cats .link .popup-icon {position: relative;left: 60px;}

.skin-box-bd .menu-list .menu .link .popup-icon,.skin-box-bd .all-cats .link .popup-icon{margin-top: 31px;}

.skin-box-bd .menu-list .menu-selected .link .title { color:#000;}

.skin-box-bd .menu-list .menu-selected .link .title { background-image:url(https://img.alicdn.com/imgextra/i4/675431384/TB2exVtj3RkpuFjy1zeXXc.6FXa_!!675431384.gif); background-repeat:no-repeat; background-position:0 -70px;}

.skin-box-bd .menu-list .menu-selected:hover .link .title {background-position:0 50px;}

/*====導(dǎo)航彈出====*/

.menu-popup-cats .sub-cat-hover {background: #2f2f2f;}

.menu-popup-cats .sub-cat-hover .cat-name,.skin-box-bd .popup-content .cats-tree .cat-hd-hover .fst-cat-name { text-indent:17px;}

.skin-box-bd .menu-list .menu-selected .link .title,.skin-box-bd .menu-list .menu .title { transition:all ease-in-out .7s; -webkit-transition:all ease-in-out .7s;}

.tshop-pbsm-shop-nav-ch .menu-popup-cats .sub-cat-hover,.menu-popup-cats .sub-cat-hover .cat-name,.skin-box-bd .popup-content .cats-tree .cat-hd-hover,.skin-box-bd .popup-content .cats-tree .cat-hd-hover .fst-cat-name{ transition:all ease-in-out .6s; -webkit-transition:all ease-in-out .6s;}

三：使用說明
1- 我店鋪是基礎(chǔ)版，所以用到天貓導(dǎo)航 可能會有點(diǎn)改變，如果沒有的話 就忽視這條
2- 為了方便小伙伴使用，特意把代碼做了一些簡單說明。這些說明 可以直接復(fù)制到店鋪，淘寶會自動過濾掉注釋
3- 代碼中添加了圖片，所以最好是先把圖片傳到你自己的圖片空間 替換掉，然后再測試效果
4- 至于如何保存代碼中的圖，應(yīng)該都會把。不會的話 就復(fù)制圖片地址 下載或者在瀏覽器打開圖片，右鍵保存圖片

因?yàn)槲冶容^懶，所以彈出的部分，只是簡單做了個效果，有代碼基礎(chǔ)的同志 可以稍微完善一下