首先來個(gè)效果圖預(yù)覽，因?yàn)槭莋if圖，可能有點(diǎn)延遲和不清晰，效果會有點(diǎn)影響。不過主要是展示 是什么樣的效果

【原創(chuàng)】：米色（miseu）

【靈感】：良品鋪?zhàn)?/p>

【適用】：淘寶店鋪（理論上天貓也可以，由于米色沒有天貓所以沒有測試）

很多人看到這個(gè)效果，第一印象可能是，這是自定義的導(dǎo)航吧？不可能是默認(rèn)導(dǎo)航修改的，理由如下：

1. 導(dǎo)航的文字，怎么是兩排的？

2. 為什么導(dǎo)航上面可以有圖標(biāo)遮住導(dǎo)航？

3. 為什么鼠標(biāo)經(jīng)過 半透明黑色背景是從下往上動(dòng)的？

4. ..............

   
   

雖然有很多理由告訴你，這個(gè)用默認(rèn)導(dǎo)航很難實(shí)現(xiàn)，但是米色很負(fù)責(zé)的說，這是默認(rèn)導(dǎo)航修改的。

很多人可能不了解，不就是個(gè)簡單效果嗎，用默認(rèn)導(dǎo)航做出來很難嗎？

1-默認(rèn)導(dǎo)航，默認(rèn)尺寸只有950px*30px 超過頭部區(qū)域150px高，會隱藏掉

2-默認(rèn)導(dǎo)航，不允許使用絕對定位，可能有小伙伴不了解絕對定位是啥，沒關(guān)系，通俗點(diǎn)說，絕對定位，很強(qiáng)?。。。?！

一下子想不到那么多，就先說兩點(diǎn)，有些小伙伴還是不理解，就算這樣，導(dǎo)航不是允許我們使用CSS代碼嗎？實(shí)現(xiàn)這個(gè)效果很難嗎？那米色就簡單說下這個(gè)效果的精妙之處：

1. 導(dǎo)航頂部有一個(gè)半圓那樣的遮罩，蓋住導(dǎo)航效果（鼠標(biāo)經(jīng)過分類，背景色顯示在遮罩下面）

2. 鼠標(biāo)經(jīng)過導(dǎo)航分類，分類背景色，是從下往上顯示（很多人會說，鼠標(biāo)經(jīng)過前高度0，鼠標(biāo)經(jīng)過后高度150，不久可以了？米色只想說，那你試試就知道了）

3. 如果你的店鋪寶貝分類存在二級分類，導(dǎo)航上該分類的下方就會出現(xiàn)一個(gè)小箭頭的圖標(biāo)，沒有二級分類的 就不會出現(xiàn)

4. 由于是默認(rèn)導(dǎo)航修改，所以文字是可以自己修改的，就不需要又去PS里面修改分類名，然后替換圖片那么麻煩

5. 為例讓效果好看點(diǎn)，米色順便也把二級彈出和三級彈出修改了下樣式

說了這么多，那這個(gè)效果還有那些不足之處呢？

1-由于淘寶默認(rèn)導(dǎo)航，不允許我們使用結(jié)構(gòu)性偽類，所以沒辦法單獨(dú)自定義每個(gè)分類的背景圖效果，只能一起定義，所以如果想要實(shí)現(xiàn)每個(gè)分類的背景色不一樣，目前只能在PS里面先做好背景圖了

2-還是跟上面說的，因?yàn)闆]辦法單獨(dú)自定義每個(gè)分類的效果，米色默認(rèn)放的8個(gè)分類。如果你需要9個(gè)或者少于8個(gè)，只能先去PS里面，把背景圖修改下了。由于淘寶限制，無法自動(dòng)獲取了。

這就是這個(gè)效果，比較頭疼的兩個(gè)小問題。不過不太影響效果。

【源碼分享】：

源碼已經(jīng)上傳到文章附件，直接下載

留個(gè)小作業(yè)吧：

細(xì)心同志可能發(fā)現(xiàn)了，我的效果圖里面，分類右邊是存在一個(gè)產(chǎn)品的，你知道如何在默認(rèn)導(dǎo)航上面插入自定義代碼嗎？

最后吐槽下，有些人肯定會想，現(xiàn)在都手機(jī)端了，誰還看電腦端效果呢，學(xué)了沒什么用。

對于這樣的想法，只想說，人吶，要看長遠(yuǎn)點(diǎn)。美圖秀秀那么發(fā)達(dá) 為啥還去學(xué)PS或者修圖什么的？

2012年前，淘寶店很丑，只是放圖片和文字，但是2012年新旺鋪出現(xiàn)后，店鋪允許使用代碼，一下子才出現(xiàn)現(xiàn)在各種各樣的店鋪效果。

現(xiàn)在手機(jī)端 一般只允許我們放圖片+鏈接，以后呢？歷史總是相似的。我們不能只是看現(xiàn)在不需要就不學(xué)，等你需要的時(shí)候，就晚了，所以一直走在別人后面。

關(guān)于這個(gè)問題，每個(gè)人看法不一樣，這里不多啰嗦了。我只是來分享技術(shù)經(jīng)驗(yàn)的，技術(shù)層面的東西，非哲學(xué)層面的東西。哈哈