淘宝店铺装修之导航条代码超级详细分析
对于淘宝店铺，导航条装修，很多店主朋友都很烦恼吧？在950px，30px这点大的地方，通过装修让它变得好看起来，貌似挺困难的！
面临这种问题的时候，很多店主朋友往往都选择的是：不用系统给的导航条，通过PS制作好导航条图片，再在使用dreamweaver的热点编辑工具对它们进行热点区域划分！最后在使用到我们的店铺中去。例如：
这种方法也可以像他们一样这样去做，但是亲们不觉得这样挺单调呀？给人死板的感觉！既然是2012新旺铺，那么该灵动的还是灵动起来！
这是东东模板里面的截图例子（都是可以再淘宝导航条上实现的哦）
是不是挺赞！！呵呵，是不是大家发现原来，就使用淘宝自带的导航条去编辑导航条，也能很花哨呀？
当然呢这些都是通过代码去实现的，一说到代码估计大多数店主大人都很头疼吧！呵呵，其实只要大家耐心去琢磨琢磨都挺简单的！
下面呢，就由东东给大家详细说说这个关于导航条的代码问题！
首先呢，要是当拿到一段关于导航条的代码，我们应该把这段代码具体放在哪里呢？
这里需要我们：阿里网卖家版—>进入店铺装修页面—>点击导航条装修的“编辑”
然后代码的位置放在如图所示：（一定是显示设置里面哦）
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
下面就是关于导航条的各种代码啦：
(注：代码中“#xxxxxx”一律为颜代码，店主朋友们可以自行设置）
静态背景:
1.首页/店铺动态/其它导航类目的背景
.skin-box-bd .menu-list .link{background:#1e1e1e;}
2.所有分类的背景（最左边的）
.all-cats .link{background:#1e1e1e;}
3.导航条整个分类段背景
.skin-box-bd .menu-list{background:#1e1e1e;}
4.导航条背景，修补导航右侧缺口
.skin-box-bd{background:#1e1e1e;}
静态分割线
1.首页等分类的右边的分隔线颜
.menu-list .menu{border-color:#1e1e1e;}
2.所有分类的右边的分隔线颜
.all-cats .link{border-color:#1e1e1e;}
3.首页等分类的右边静态分割线不要
.menu-list .menu{border-width:0;}
4.所有分类的右边的分隔线不要
.all-cats .link{border-width:0;}
（静态分割线的不要就可以达到如下图的效果哦！！）
是不是觉得有时候，没有静态分割线，导航条更加漂亮咯！！(*^__^*) 嘻嘻……）
静态文字
1.首页/店铺动态/其它导航类目的文字颜
.menu-list .menu .title{color:white;}
2.所有分类的文字颜（最左边那个）
.all-cats .link .title{color:white;}
鼠标滑过背景
1.鼠标滑过首页/店铺动态/其它导航类目变换背景
.menu-list .menu-hover .link{background:blue;}
渐变颜代码大全2.鼠标滑过所有分类（最左边那个）变换背景
.all-cats-hover .link{background:blue;}
鼠标滑过文字
1.鼠标滑过首页/店铺动态/其它导航类目变换文字颜
.menu-list .menu-hover .title{color:red;}
2.鼠标滑过所有分类（最左边那个）变换文字颜
.all-cats-hover .link .title{color:red;}
被激活项目文字颜
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
被激活项目背景颜
.skin-box-bd .menu-list .menu-selected .link{background:purple;}
至于“所有分类”下面的下拉菜单中的一级、二级分类等相关的设置（最好不要去设置，非专业设计人士，一般自己设置颜，背景什么的都不如系统默认的那种配置好！！）
对于像下图这种导航条的效果：
大家可以明显看出，导航条里面的背景颜是具有颜渐变效果的吧！！
当然通过单纯的代码里面的颜代码（也就是“#xxxxxx”） 肯定实现不了上图这种效果的！
那怎么样才是实现这种效果的导航条效果呢？
其实他们只不过从背景颜，变成了一种背景图片的形式！！
原来代码比如这一条：
.
skin-box-bd .menu-list .link{background:#ffffff;}      -----------（是指首页/店铺动态/其它导航类目的背景）
大家看到“background”了吧！它是指背景的意思，后面跟的是颜代码#ffffff，
其实background后面不仅可以跟上颜代码，还可以跟上图片地址：
假如换成
.skin-box-bd .menu-list .link{background:url(图片地址）;}
这句代码的意思就成为了（首页/店铺动态/其他导航类目的背景图片）
又比如：被激活项目背景颜
.skin-box-bd .menu-list .menu-selected .link{background:purple;}
假如换成：
.skin-box-bd .menu-list .menu-selected .link{background:url(图片地址）;}
意思为（被激活项目的显示背景图片）
是不是挺简单的呀有了它们我相信各位店主大大都能自己做出自己精美的导航条啦！
（PS：板砖和鲜花，亲们悠着点给呀！，小弟心脏不好 **^__^**）
还有不懂得亲或者对各种店铺装修存在种种问题的朋友  看我百度账号 加我扣扣好友 线上问东东

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。