电商美工和店主，你的淘宝店可能需要这样一个炫酷的CSS导航条

这个效果是第十二期代码培训课程里面作为案例演示的。然后放到了店铺里面，群里很多小伙伴看到觉得喜欢。
所以这里米色免费将源码分享出来。有喜欢的小伙伴 可以自己去测试下。

一：效果演示

二：源码分享

/*====整体导航====*/

.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;}

/*====右侧分类导航====*/

.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;}

/*小图标-主要是配合导航效果，对图标位置做了调整*/

.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;}

/*====导航弹出====*/

.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- 我店铺是基础版，所以用到天猫导航 可能会有点改变，如果没有的话 就忽视这条
2- 为了方便小伙伴使用，特意把代码做了一些简单说明。这些说明 可以直接复制到店铺，淘宝会自动过滤掉注释
3- 代码中添加了图片，所以最好是先把图片传到你自己的图片空间 替换掉，然后再测试效果
4- 至于如何保存代码中的图，应该都会把。不会的话 就复制图片地址 下载或者在浏览器打开图片，右键保存图片

因为我比较懒，所以弹出的部分，只是简单做了个效果，有代码基础的同志 可以稍微完善一下