淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3442|回复: 14
收起左侧

导航CSS代码大全 菜鸟值得收藏

[复制链接]
  • TA的每日心情
    臭美
    2016-5-14 12:22
  • 签到天数: 35 天

    连续签到: 1 天

    [LV.5]略有小成

    23

    主题

    309

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    67656

    天猫美工最佳新人热心会员宣传达人

    发表于 2016-4-5 14:58:06 | 显示全部楼层 |阅读模式
    本帖最后由 你是神 于 2016-4-5 15:01 编辑

    简单的CSS代码

    .skin-box-bd{background: #FFF; border-top: 1px #CCCCCC dashed;} /*整个导航条*/




    /*以下为所有分类的属性*/


    .all-cats{background: none; max-width: 300px; _width: 300px;}/*所有分类div的最大宽度300px*/

    .all-cats .link {background:none; border:none;} /*此处尽量不要更改*/


    .all-cats .link .title {color: #737373; font-weight: bold;}/*所有分类文字的颜色和文字加粗,也可以设置文字大小、文字类型等属性*/


    .all-cats .link .title:hover{color: #333;}/*鼠标停留时,所有分类文字的颜色*/


    .all-cats .link:hover{background: none;}/*鼠标停留时,所有分类背景的颜色*/

    .all-cats .link .popup-icon {background: url("http://img02.taobaocdn.com/imgextra/i2/671862285/T2wqfXXjlbXXXXXXXX_!!671862285.png") no-
    repeat; width: 15px; height: 13px; margin-top: 10px; margin-left: 70px; float: right;}/*所有分类右边的小图标*/




    /*以下为所有分类的子菜单的属性*/

    .popup-content{background: #fff; border: 1px #CCC solid; width: 180px;}/*一级子菜单整个div的属性*/

    .popup-content .cats-tree .fst-cat {width: 180px; border:none; float: left;}/*一级子菜单每个菜单项的属性*/


    .popup-content .cats-tree .fst-cat .cat-name {color: #737373; font-weight: normal;} /*一级子菜单文字的属性*/


    .popup-content .cats-tree .cat-hd-hover {background: #acd598;}/*鼠标停留时一级子菜单的背景色*/


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


    ——————————————————————————————————————————————————————————————————


    复杂的CSS代码

    .skin-box-bd{background: #FFF; border-top: 1px #CCCCCC dashed;} /*整个导航条*/




    /*以下为所有分类的属性*/


    .all-cats{background: none; max-width: 300px; _width: 300px;}/*所有分类div的最大宽度300px*/
    .all-cats .link {background:none; border:none;} /*此处尽量不要更改*/
    .all-cats .link .title {color: #737373; font-weight: bold;}/*所有分类文字的颜色和文字加粗,也可以设置文字大小、文字类型等属性*/
    .all-cats .link .title:hover{color: #333;}/*鼠标停留时,所有分类文字的颜色*/
    .all-cats .link:hover{background: none;}/*鼠标停留时,所有分类背景的颜色*/

    .all-cats .link .popup-icon {background: url("http://img02.taobaocdn.com/imgextra/i2/671862285/T2wqfXXjlbXXXXXXXX_!!671862285.png") no-repeat; width: 15px; height: 13px; margin-top: 10px; margin-left: 70px; float: right;}/*所有分类右边的小图标*/




    /*以下为所有分类的子菜单的属性*/

    .popup-content{background: #fff; border: 1px #CCC solid; width: 180px;}/*一级子菜单整个div的属性*/
    .popup-content .cats-tree .fst-cat {width: 180px; border:none; float: left;}/*一级子菜单每个菜单项的属性*/
    .popup-content .cats-tree .fst-cat .cat-name {color: #737373; font-weight: normal;} /*一级子菜单文字的属性*/
    .popup-content .cats-tree .cat-hd-hover {background: #acd598;}/*鼠标停留时一级子菜单的背景色*/
    .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;}




    ——————————————————————————————————————————————————————————————————
    透明导航CSS代码

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






    评分

    参与人数 1美工币 +10 收起 理由
    陈旧 + 10 乐于助人!

    查看全部评分

    怎么在图片里面插入视频然后上传天猫
  • TA的每日心情
    无奈
    2016-4-8 10:19
  • 签到天数: 14 天

    连续签到: 1 天

    [LV.3]武林新秀

    8

    主题

    181

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    30305

    最佳新人

    发表于 2016-4-5 15:00:16 | 显示全部楼层
    直接生成啊  多方便

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45073

    最佳新人热心会员

    QQ
    发表于 2016-4-5 15:45:03 | 显示全部楼层
    可以试一下这效果,不错的!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情
    臭美
    2016-3-16 11:21
  • 签到天数: 94 天

    连续签到: 1 天

    [LV.6]渐入佳境

    1

    主题

    28

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    14445

    发表于 2016-4-5 15:48:26 | 显示全部楼层
    有需要  收了  台感谢

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    10 小时前
  • 签到天数: 340 天

    连续签到: 1 天

    [LV.8]自成一派

    11

    主题

    466

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52265

    最佳新人热心会员

    发表于 2016-4-5 21:19:20 | 显示全部楼层
    感谢分享。

  • TA的每日心情

    2016-10-5 11:26
  • 签到天数: 270 天

    连续签到: 1 天

    [LV.8]自成一派

    2

    主题

    173

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43388

    发表于 2016-4-6 10:10:48 | 显示全部楼层
    顶楼主啦..希望楼主多发精品好帖啦.....
    天晴
  • TA的每日心情
    抱抱
    2016-6-15 18:56
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    10

    主题

    175

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11536

    发表于 2016-4-6 11:31:32 | 显示全部楼层
    三口~三口~三口~

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    吐舌头
    2016-10-6 23:18
  • 签到天数: 135 天

    连续签到: 1 天

    [LV.7]炉火纯青

    0

    主题

    8

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22362

    发表于 2016-4-6 14:32:07 | 显示全部楼层
    谢谢分享,我看看

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    求抱抱
    2016-4-25 15:38
  • 签到天数: 4 天

    连续签到: 1 天

    [LV.2]登堂入室

    1

    主题

    6

    帖子

    572

    积分

    新手上路

    阅读权限: 10

    Rank: 1

    积分
    572

    发表于 2016-4-18 13:50:40 | 显示全部楼层
    没怎么看懂呀

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-3 23:46 , Processed in 0.122488 second(s), 23 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表