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

2020-11-22 02:00 刚子爱创业

这个效果是作为案例演示的一个效果。然后放到了店铺里面，很多小伙伴看到觉得喜欢。

所以这里米色免费将源码分享出来。有喜欢的小伙伴可以自己去测试下。

一：效果演示

大家可以复制代码在店铺测试，注意代码里面有图片，需要换成你店铺的图片才可以。

可以先复制代码里面的图片在浏览器打开，保存到电脑上，然后上传到图片空间再替换到代码里面测试预览

二：源码分享

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

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