天猫导航条各种代码。（12.10更新）自测可用。旺铺专业版设计

本帖最后由 chanchanchan 于 2013-12-11 16:50 编辑 天猫导航条各种代码。（非原创）
自测可用。
自测可用。
自测可用。
以下文字内容可以一同复制使用，不会影响到使用效果哦！

[/hide][hide]天猫官方代码：

[hide]/* 导航条背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #00ad08;}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{border-right:1px #006205 solid;}
/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .title{color:#ff0000}
/*所有分类背景色*/
.all-cats .link{background: none repeat scroll 0 0 #00ad08;}
/*所有分类右边线*/
.all-cats .link{border-right:1px #006205 solid;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{color:#ff0000}
-----------------
-----------------

收集部分：

第一部分、静态背景颜色
1、首页/店铺动态/其它导航类目的背景色，这里设为红色
.skin-box-bd .menu-list .link{background:red;}
复制代码
2、所有分类的背景色（最左边的），一样设为红色
.all-cats .link{background:red;}
复制代码
3、导航条整个分类段背景色，还是要设为红色，整体布局好看些
.skin-box-bd .menu-list{background:red;}
复制代码
4、导航条背景色（是最底层了吧），修补导航右侧缺口，再设为红色
.skin-box-bd{background:red;}
复制代码
第二部分、分隔线、静态文字的颜色
1、首页等分类的右边的分隔线颜色，设为白色
.menu-list .menu{border-color:white;}
复制代码
2、所有分类的右边的分隔线颜色，设为白色
.all-cats .link{border-color:white;}
复制代码
3、首页/店铺动态/其它导航类目的文字颜色
.menu-list .menu .title{color:yellow;}
复制代码
4、所有分类的文字颜色（最左边那个）
.all-cats .link .title{color:yellow;}
复制代码
第三部分、分类下的颜色
1、二级分类的背景色，设为灰色
.popup-content{background:gray;}
复制代码
2、三级分类的背景色，我设为深灰色
.popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
复制代码
3、二级分类的文字颜色，设为黄色
.popup-content .cat-name{color:yellow;}
复制代码
4、三级分类的文字颜色。（如果后面要鼠标滑过变色<21.22>，这句要写）
.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
复制代码
第四部分、鼠标滑过变背景色
1、鼠标滑过首页/店铺动态/其它导航类目变换背景色，这设为蓝色
.menu-list .menu-hover .link{background:blue;}
复制代码
2、鼠标滑过所有分类（最左边那个）变换背景色，这同样设为蓝色
.all-cats-hover .link{background:blue;}
复制代码
3、鼠标滑过所有分类下的二级分类变换背景色，这设为蓝色
.popup-content .cats-tree .cat-hd-hover{background:blue;}
复制代码
4、鼠标滑过所有分类下的三级分类变换背景色，这设为深蓝色
.popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
复制代码
5、鼠标滑过导航类目下的宝贝分类变换背景色，这设为蓝色
.menu-popup-cats .sub-cat-hover{background:blue;}
复制代码
第五部分、鼠标滑过变文字颜色
1、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色，这设为红色
.menu-list .menu-hover .title{color:red;}
复制代码
2、鼠标滑过所有分类（最左边那个）变换文字颜色，这同样设为红色
.all-cats-hover .link .title{color:red;}
复制代码
3、鼠标滑过导航类目下的宝贝分类变换文字颜色，这设为红色
.menu-popup-cats .sub-cat-hover .cat-name{color:red;}
复制代码
4、鼠标滑过所有分类下的二级分类变换文字颜色，这设为红色
.popup-content .cat-hd-hover .cat-name{color:red;}
复制代码
5、鼠标滑过所有分类下的三级分类变换文字颜色，这设为红色
.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
复制代码
第六部分、导航项目激活状态
1、激活项目的文字背景色（难看，所以none）、文字颜色（选白色）
.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
复制代码
2、激活项目的项目背景色（项目框），选紫
.skin-box-bd .menu-list .menu-selected .link{background:purple;}
复制代码
总结：淘宝导航条CSS代码class类参考，简单方便的还是直接用软件快速
---------------------------------------------------------------------
注1：颜色代码可以是英文单词，如white（白）、black（黑）、red（红）
也可以是白色#ffffff、黑色#000000等等表示。
注2：背景色也可用图片，如：｛background:url(图片地址）;}[/hide]

2013年12月10日12:53:36 更新
去掉微淘主页的代码
[hide].aitao-menu{display: none; width:0px; text-indent:2000px;}[/hide]

复杂的css导航代码
[hide].popup-content .cats-tree .cat-hd-hover .cat-name {color: #fff;}/*鼠标停留时一级子菜单的文字*/

.popup-content .cats-tree .snd-pop-inner {background:#fff; border:1px #CCCCCC solid; width: 170px; height: 300px;}/*二级子菜单的背景颜色、宽度和高度*/
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a {color:#737373; font-weight: normal;}/*二级子菜单的文字的属性*/
.popup-content .cats-tree .snd-cat-hd-hover {background: none;}/*鼠标停留时二级子菜单背景的颜色*/
.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover {color: #000;}/*鼠标停留时二级子菜单的文字颜色*/

/*以下为除所有分类外，其他菜单的属性*/

.menu-list {background: none; width: 750px;} /*其他菜单整个div的背景颜色和宽度*/
.menu-list .link {background: none;}
.menu-list .menu {background: none; border:none;} /*其他菜单每个菜单项的背景颜色*/
.menu-list .menu .title {color: #737373; font-weight: bold;} /*其他菜单每个菜单项的文字属性*/
.menu-list .menu-hover .link {background: #acd598;} /*鼠标停留时，其他菜单的菜单项的背景颜色*/
.menu-list .menu-hover .link .title {background: none; color: #FFF; border:none;}/*鼠标停留时其他菜单的菜单项的文字属性*/

.menu-list .menu-selected .link {background: none;}
.menu-list .menu-selected .link .title {background:none;color:#737373;}/*当前选中的菜单项的背景*/

/*以下为除所有分类外，其他菜单的子菜单的属性，尽量设置成和所有分类的子菜单一样*/

.menu-list .menu .popup-content {background: #fff; width: 120px;}
.menu-popup-cats {width: 120px;}
.menu-popup-cats .sub-cat-hover {background: #fff;}
.menu-popup-cats .sub-cat .cat-name {color: #737373;}
.menu-popup-cats .sub-cat-hover .cat-name {color: #000;}
.menu-list .menu .link .popup-icon {background: url("http://img.taobao.com/L1/142/1312847/modules/tshop-pbsm-shop-nav-ch/assets/images/tran.png") no-repeat; width: 9px; height: 8px; margin-top: 11px; margin-left: 10px; float: left; display: inline-block;}
[/hide]

透明css导航

[hide].skin-box-bd{background:none;border:none;}
.menu-list{background:none;}
.link{background:none;border:none;}
.menu{background:none;}
.all-cats{background:none;}
.skin-box-bd .all-cats .link{border:none;}
.skin-box-bd .menu-list .menu{border:none;}
.menu-list .menu .title{color:#000000;font-size:15px;font-weight:bold;}
.all-cats .link .title{color:#000000;font-size:15px;font-weight:bold;}
.skin-box-bd .menu-list .menu-selected .link{background:none;}
.skin-box-bd .menu-list .menu-selected .link .title{background:none;}
[/hide]

重要的不是这些代码，而是分享的精神。你们回复的不是帖子。而是对平台的一种支持！

天猫导航条各种代码。（12.10更新）自测可用。

最新点赞

chanchanchan

全部评论(1033)

猜你喜欢

上班一天，灵魂发癫[躺平者联盟TANGPION]

MENSUELM男士丝袜×天羿 | 企业品牌战略定位超级全案

天猫导航条各种代码。（12.10更新）自测可用。