首先来个效果图预览，因为是gif图，可能有点延迟和不清晰，效果会有点影响。不过主要是展示 是什么样的效果

【原创】：米色（miseu）

【灵感】：良品铺子

【适用】：淘宝店铺（理论上天猫也可以，由于米色没有天猫所以没有测试）

很多人看到这个效果，第一印象可能是，这是自定义的导航吧？不可能是默认导航修改的，理由如下：

1. 导航的文字，怎么是两排的？

2. 为什么导航上面可以有图标遮住导航？

3. 为什么鼠标经过 半透明黑色背景是从下往上动的？

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

   
   

虽然有很多理由告诉你，这个用默认导航很难实现，但是米色很负责的说，这是默认导航修改的。

很多人可能不了解，不就是个简单效果吗，用默认导航做出来很难吗？

1-默认导航，默认尺寸只有950px*30px 超过头部区域150px高，会隐藏掉

2-默认导航，不允许使用绝对定位，可能有小伙伴不了解绝对定位是啥，没关系，通俗点说，绝对定位，很强！！！！！

一下子想不到那么多，就先说两点，有些小伙伴还是不理解，就算这样，导航不是允许我们使用CSS代码吗？实现这个效果很难吗？那米色就简单说下这个效果的精妙之处：

1. 导航顶部有一个半圆那样的遮罩，盖住导航效果（鼠标经过分类，背景色显示在遮罩下面）

2. 鼠标经过导航分类，分类背景色，是从下往上显示（很多人会说，鼠标经过前高度0，鼠标经过后高度150，不久可以了？米色只想说，那你试试就知道了）

3. 如果你的店铺宝贝分类存在二级分类，导航上该分类的下方就会出现一个小箭头的图标，没有二级分类的 就不会出现

4. 由于是默认导航修改，所以文字是可以自己修改的，就不需要又去PS里面修改分类名，然后替换图片那么麻烦

5. 为例让效果好看点，米色顺便也把二级弹出和三级弹出修改了下样式

说了这么多，那这个效果还有那些不足之处呢？

1-由于淘宝默认导航，不允许我们使用结构性伪类，所以没办法单独自定义每个分类的背景图效果，只能一起定义，所以如果想要实现每个分类的背景色不一样，目前只能在PS里面先做好背景图了

2-还是跟上面说的，因为没办法单独自定义每个分类的效果，米色默认放的8个分类。如果你需要9个或者少于8个，只能先去PS里面，把背景图修改下了。由于淘宝限制，无法自动获取了。

这就是这个效果，比较头疼的两个小问题。不过不太影响效果。

【源码分享】：

源码已经上传到文章附件，直接下载

留个小作业吧：

细心同志可能发现了，我的效果图里面，分类右边是存在一个产品的，你知道如何在默认导航上面插入自定义代码吗？

最后吐槽下，有些人肯定会想，现在都手机端了，谁还看电脑端效果呢，学了没什么用。

对于这样的想法，只想说，人呐，要看长远点。美图秀秀那么发达 为啥还去学PS或者修图什么的？

2012年前，淘宝店很丑，只是放图片和文字，但是2012年新旺铺出现后，店铺允许使用代码，一下子才出现现在各种各样的店铺效果。

现在手机端 一般只允许我们放图片+链接，以后呢？历史总是相似的。我们不能只是看现在不需要就不学，等你需要的时候，就晚了，所以一直走在别人后面。

关于这个问题，每个人看法不一样，这里不多啰嗦了。我只是来分享技术经验的，技术层面的东西，非哲学层面的东西。哈哈