看過很多淘寶旺鋪的導航都是比較死板的，不然就是顏色不同而已，那么我們怎樣才能做得別具一格？讓訪客來看到比較印象深刻一點？好吧，在這里廣州淘寶美工培訓放出一個導航分類翻滾的代碼。

一、打開我們的旺鋪裝修，移動到導航右側會有一個編輯的選項。


二、選擇“顯示設置”選項，然后會出現以下的窗口框。


三、把以下代碼復制進去，注意這里要選擇紅色的模版。




代碼如下：


.skin-box-bd.menu-list{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd.link{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd.menu-list.menu-selected.link.title{background:url(http://img02.taobaocdn.com/imgextra/i2/1916485983/T2zxO_XCXXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd.all-cats.all-cats-trigger{margin:0px;padding:0px;background:none;}.skin-box-bd.all-cats.all-cats-trigger.link.title{display:none;}.skin-box-bd.all-cats.all-cats-trigger.link.popup-icon{display:none;}.all-cats{background:none;max-width:300px;_width:300px;}.menu-list{background:none;width:700px;}.skin-box-bd.all-cats.all-cats-trigger.link{width:190px;margin:0px;padding:0px;border:none;display:block;background:no-repeaturl(http://img01.taobaocdn.com/imgextra/i1/1916485983/T29L1.XrlXXXXXXXXX_!!1916485983.jpg);}.skin-box-bd.all-cats.all-cats-trigger.link:hover{background-position:0px-30px;}.menu-list.menua{position:relative;-webkit-transition:0.5sease-out;-moz-transition:0.5sease-out;-o-transition:0.5sease-out;transition:0.5sease-out;}.menu-list.menu:hovera{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}.all-cats-popup{width:186px;height:auto;margin:0px;padding:0px;background:#FFFFFF;border-color:#C20404;}.all-cats-popup.popup-inner{width:190px;height:auto;margin:0px;padding:0px;}.all-cats-popup.popup-inner.cats-tree{width:190px;height:auto;margin:0px;padding:0px;display:block;opacity:0.9;}.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd.fst-cat-name{width:176px;height:30px;margin:0px0px0px10px;padding:0px;display:block;float:left;line-height:30px;font-family:"微軟雅黑";font-size:13px;color:#C20404;}.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd{width:188px;height:30px;margin:0px;padding:0px;display:block;background:none;}.all-cats-popup.popup-inner.cats-tree.fst-cat{width:186px;}.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover{background:#C20404;}.all-cats-popup.popup-inner.cats-tree.fst-cat.fst-cat-hd:hover.fst-cat-name{color:#FFFFFF;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop{width:190px;height:auto;margin:0px;padding:0px;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner{width:190px;height:auto;margin:0px;padding:0px;border:2pxsolid#C20404;opacity:0.9;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner.fst-cat-bd{width:190px;height:auto;margin:0px;padding:0px;display:block;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner.fst-cat-bd.snd-cat{width:190px;height:auto;margin:0px;padding:0px;display:block;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner.fst-cat-bd.snd-cat.snd-cat-hd{width:190px;height:30px;margin:0px;padding:0px;display:block;background:#C20404;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner.fst-cat-bd.snd-cat.snd-cat-hd:hover{background:#FFFFFF;}.all-cats-popup.popup-inner.cats-tree.fst-cat.snd-pop.snd-pop-inner.fst-cat-bd.snd-cat.snd-cat-hd:hover.snd-cat-name{color:#000000;}

樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。

本文內容整合網站：百度百科、知乎、淘寶平臺規則

本文來源： 淘寶旺鋪導航分類翻滾效果怎么制作？