今天要跟大家分享的是

店铺导航条CSS样式

﹀

﹀

﹀

1

店铺导航条

相当于店铺里面的菜单，通过它跳转到其他页面

就是这个东西 ↓↓↓

正常情况下，它应该是这个样子的 ↓↓↓

（有一点丑丑的）

2

须知

导航开放了css装修功能，可以用css代码，装修出超炫的效果

它并不是只有那个蓝色的版本。。。

表演开始

第一进入店铺装修页面，点开导航条右侧“编辑”按钮

进入编辑页面

修改导航条的背景颜色，代码 ↓↓↓

.skin-box-bd .link{background:#000000;}

【请将代码整条复制，可修改部分已加粗，具体色号可自行查找】

代码 ↓↓↓.skin-box-bd .link{background:url(图片链接);

第二如果你想要个性一些，你也可以制作图片作为背景

复制图片链接

代码 ↓↓↓.skin-box-bd .link{background:url(图片链接);

效果图

第三修改整个导航条的颜色（不包括上一点的部分），

代码 ↓↓↓

.skin-box-bd .menu-list{background:#000000;}

当然也可以替换成图片，代码 ↓↓↓

.skin-box-bd .menu-list{background:url(图片链接);}

刚刚这个部分还没有改变颜色

， 改色代码 ↓↓↓

.skin-box-bd{background:#000000;}

换图的代码↓↓

.skin-box-bd{background:url(图片链接);}

基本上做完了，看一下成品：

成品图

（可能是因为要做教程，删删改改太多次，备份有点乱，跟别人的不太一样，本来应该是这个样子的 ：

图片来自论坛：

）

【须知：整个部分包括 字里 以及 字外，所以需要两条代码↓↓↓】

字里：.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}

字外： .skin-box-bd .menu-list .menu-selected .link{background:#000000;}

看一下成品：

成品

这几条分割线的颜色还没有改，更改代码 ↓↓↓

.menu-list .menu{border-color:#000000;}

还有一个不一样

再加一条代码：

.all-cats .link{border-color:#000000;}

有时候会觉得分类导航太窄了（不要问我为什么对一条导航那么多要求）

字稍微大一点就放不下。。。。。

所以，辣么宽宽宽的间距代码 ↓↓↓

.menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}

刚刚把间距调宽了，但是我觉得字太小了，显得太空了

……有变化吗？？？ 字真的太小了，字大大大代码 ↓↓↓

.menu-list .menu .title{color:#颜色代码;font-size:字号px;}

成品

但是，为什么这个所有分类总是要搞特殊！！！

解决它的代码：

.all-cats .link .title{color:#颜色;font-size:字号px;}

【须知：字号最好不要超过20px，否则 ↓↓↓ 】

跑出来的部分是不会显示的，后面你就会看到

完成了……但是这个字就是有点单调，就没有鼠标滑过变色之类的特效来调戏一下它这个按钮？？？

不知道为什么不考虑它作为按钮的感受……

管他呢 ……

代码接好 ↓↓↓

.menu-list .menu-hover .link{background:#000000;}

鼠标滑过变色的特效

（看吧，跑出来的“类”已经消失了……）

动图了解一下：

诶，这个背景变了，这个字……能不能也变一变呢……

鼠标滑过字体变色代码 ↓↓↓

.menu-list .menu-hover .link .title{color:#FFFFFF;}

鼠标滑过字体变色

以上，导航条一级菜单修改完毕

这个意思就是

二三级菜单没改

就是这个↓↓↓

二三级菜单

那么这个要怎么改呢？

请继续看表演 ↓↓↓

二级菜单1字号及颜色 ↓↓↓

.popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

2下拉菜单背景颜色：

.popup-content{background:#000000;}

3鼠标滑过二级菜单，变换背景色：

.popup-content .cats-tree .cat-hd-hover{background:#000000;}

鼠标滑过二级菜单，变换背景色

阿偶，我忘记三级菜单的感受了……

看来字体也要变一变

4鼠标滑过二级菜单，变换字体颜色：

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

鼠标滑过二级菜单，变换字体颜色

5二级菜单增加间距

有人就说了，下拉菜单跟那个标题凑太近了，不好看，那么我们应该打死他满足他的要求，代码 ↓↓↓

.popup-content .cats-tree{margin:0 0 50px 0;}

三级菜单1字号及颜色

.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

.popup-content .cats-tree .snd-pop-inner{font-size:字号px;color:#颜色;}

（两条都请务必试一下，可能是因为操作过于频繁，我的电脑说如果文末不给小心心它就不给看成品，不清楚是不是电脑卡了的缘故）

（然而预览它没给面子，是不是你没有在文末点小心心？！！！）

2更改背景色

.popup-content .cats-tree .snd-pop-inner{background:#000000;}

更改背景色

颜色什么的已经自暴自弃了……没想到它居然有反应

3鼠标滑过，变化背景色

.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}

鼠标滑过，变化背景色

4鼠标滑过，变化字体颜色

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

鼠标滑过，变化字体颜色

以上，是一二三级菜单的代码

另外

补充：

下拉菜单的小图标

所有分类小图标

.all-cats .link .popup-icon{background:url(图片连接);}

二级菜单小图标（需要有三级菜单）

.popup-content .cats-tree .fst-cat-icon{background:url(图片连接);}

三级菜单前加白色小图标

尽量不要太大，不然也是会GG的……

.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}

以上，真的就是全部了

看久了辣眼睛

排版有些混乱，将就看啊

【再强调一次：代码需要整条复制，全部都是英文状态编辑，不能用中文状态】

乖

我是美工小白

各位晚安

(*＾3＾)/～☆