淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 5373|回复: 70
收起左侧

分享一个动感导航

  [复制链接]
  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

    发表于 2015-7-17 11:25:15 | 显示全部楼层 |阅读模式
    在别的帖子上看到类似的,自己修改了一下,感觉还行,一些参数大家可以自行调整
    动感导航.gif.gif
    1. .skin-box-bd{
    2.    background:#333333;
    3. } /*整个导航条的颜色*/

    4. .skin-box-bd .menu-list{
    5.    background:none;
    6.    height:30px;
    7. }/* 其他分类的背景色*/


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

    9. .all-cats{
    10.    background:none;
    11.    width:100px;
    12. }/*所有分类背景色*/

    13. .all-cats .link{
    14.      background:none;
    15.      width:80px;
    16.      padding-right:3px;
    17.      border:none;
    18.      transition:background cubic-bezier(1,2,0.43,1) 0.6s;
    19.      -moz-transition:background cubic-bezier(1,2,0.43,1) 0.6s; /* Firefox 4 */
    20.      -webkit-transition:background cubic-bezier(1,2,0.43,1) 0.6s; /* Safari and Chrome */
    21.      -o-transition:background cubic-bezier(1,2,0.43,1) 0.6s; /* Opera */
    22. } /*此处尽量不要更改*/

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

    26. .all-cats .link .title {
    27.      color: #fff;
    28.      font-family:微软雅黑;
    29.      font-weight: normal;
    30. }/*所有分类文字的颜色和文字加粗,也可以设置文字大小、文字类型等属性*/

    31. .all-cats .link .popup-icon{
    32.   background:url(//gdp.alicdn.com/imgextra/i2/2528527229/TB2DxF1cVXXXXb9XXXXXXXXXXXX_!!2528527229.png) 0 0px no-repeat;
    33.   transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    34.      width:12px;
    35. }/*所有分类右侧小图标*/

    36. .all-cats-hover .link .popup-icon{
    37.     background:url(//gdp.alicdn.com/imgextra/i2/2528527229/TB2DxF1cVXXXXb9XXXXXXXXXXXX_!!2528527229.png) 0px -11px no-repeat;
    38.     transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    39. }/*鼠标划过,小图标变换*/

    40. .all-cats .link .title:hover{
    41.      color: #fff;
    42.      font-weight: normal;
    43. }/*鼠标停留时,所有分类文字的颜色*/


    44. /*以下为"所有分类"的一二级子菜单的属性*/

    45. .popup-content{
    46.      border:none;
    47.      width:180px;
    48.      color: #fff;
    49.      background: url(//gdp.alicdn.com/imgextra/i1/2528527229/TB2cXlNcVXXXXbaXpXXXXXXXXXX_!!2528527229.png);
    50. }/*一级子菜单整个div的属性*/

    51. .popup-content .cats-tree .fst-cat {
    52.      border:none;
    53.      list-style: none;
    54. }/*一级子菜单每个菜单项的属性*/

    55. .popup-content .cats-tree .fst-cat-icon{
    56.      background:none;
    57. }/*一级子菜单小图标*/

    58. .popup-content .cats-tree .fst-cat .cat-name {
    59.      color: #fff;
    60.      font-family:微软雅黑;
    61.      font-weight: normal;
    62. } /*一级子菜单文字的属性*/

    63. .popup-content .cats-tree .cat-hd-hover {
    64.      background:none;
    65.      transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    66.      -moz-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Firefox 4 */
    67.      -webkit-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Safari and Chrome */
    68.      -o-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Opera */
    69. }
    70. /*鼠标停留时一级子菜单的背景色*/

    71. .popup-content .cats-tree .cat-hd-hover:hover{
    72.      background:#FF6600;
    73.      height:40px;
    74.      padding-top:8px;
    75. }

    76. .popup-content .cats-tree .cat-hd-hover .cat-name {
    77.      color: #fff;
    78. }/*鼠标停留时一级子菜单的文字*/

    79. .snd-pop .tb-shop-popup-content{
    80.      background:none;
    81. }
    82. .popup-content .cats-tree .snd-pop-inner{
    83.      background: url(//gdp.alicdn.com/imgextra/i1/2528527229/TB2cXlNcVXXXXbaXpXXXXXXXXXX_!!2528527229.png);
    84.      position:relative;
    85.      top:-2px;/*二级菜单整体上移*/
    86.      height: 250px;
    87. }

    88. .popup-content .cats-tree .snd-pop-inner .fst-cat-bd{
    89.      background:none;
    90. }/*二级子菜单的背景颜色,可修改长宽*/

    91. .snd-pop-inner .fst-cat-bd .snd-cat-hd{
    92.      background:none;
    93.      list-style: none;
    94. }/*二级子菜单每个菜单项的背景色*/

    95. .popup-content .cats-tree .snd-cat-icon{
    96.      background:none;
    97. }/*二级子菜单小图标*/

    98. .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a {
    99.      color:#ffffff;
    100.      font-family:微软雅黑;
    101.      font-weight: normal;
    102. }/*二级子菜单的文字的属性*/

    103. .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover {
    104.      color: #fff;
    105.      text-decoration:none;
    106. }/*鼠标停留时二级子菜单的文字颜色*/

    107. .popup-content .cats-tree .snd-cat-hd-hover {
    108.      background:none;
    109.      transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    110.      -moz-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Firefox 4 */
    111.      -webkit-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Safari and Chrome */
    112.      -o-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Opera */
    113. }/*鼠标停留时二级子菜单背景的颜色*/

    114. .popup-content .cats-tree .snd-cat-hd-hover:hover{
    115.      background:#FF6600;
    116.      height:40px;
    117.      padding-top:8px;
    118. }

    119. /*以下为除"所有分类"外,其他菜单的属性*/

    120. .menu-list {
    121.      background:none;
    122. } /*其他菜单整个div的背景颜色*/

    123. .menu-list .link {
    124.      background: none;
    125. }

    126. .menu-list .menu {
    127.      background: none;
    128.      border:none;
    129.      border:none;
    130. } /*其他菜单每个菜单项的背景颜色,可设置边框*/

    131. .menu-list .menu .title {
    132.      color: #ffffff;
    133.      font-family:微软雅黑;
    134.      font-weight: normal;
    135. } /*其他菜单每个菜单项的文字属性*/

    136. .menu-list .menu .title:hover{
    137.      color: #fff;
    138.      font-weight:
    139. }/*鼠标停留时,所有分类文字的颜色*/

    140. .menu-list .link {
    141.      background:none;
    142.      height:10px;
    143.      transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    144.      -moz-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Firefox 4 */
    145.      -webkit-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Safari and Chrome */
    146.      -o-transition:all cubic-bezier(1,2,0.43,1) 0.6s; /* Opera */
    147. } /*鼠标停留时,其他菜单的菜单项的背景颜色*/

    148. .menu-list .menu-hover .link{
    149.      background:#FF6600;
    150.      height:30px;
    151.      transition:all cubic-bezier(1,2,0.43,1) 0.6s;
    152. }

    153. .menu-list .menu .link{
    154.      border:none;
    155. }/*其他菜单每个菜单项的背景颜色,可设置边框*/

    156. .menu-list .menu-hover .link .title {
    157.      background: none;
    158.      color: #fff;
    159.      border:none;
    160. }/*鼠标停留时其他菜单的菜单项的文字属性*/

    161. .menu-list .menu-selected .link {
    162.      background: none;
    163. }

    164. .menu-list .menu-selected .link .title {
    165.      background: none;
    166.      color:#fff;
    167. }/*当前选中的菜单项的背景颜色和文字颜色*/

    评分

    参与人数 3美工币 +41 收起 理由
    在职在 + 20 很给力!
    snrtmnmnyk + 1 原创!
    童心鞋意 + 20 感谢分享!

    查看全部评分

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


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

  • TA的每日心情
    不爽
    2013-8-19 20:42
  • 签到天数: 8 天

    连续签到: 1 天

    [LV.3]武林新秀

    43

    主题

    2260

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    116895

    活跃会员热心会员

    发表于 2015-7-17 11:31:33 | 显示全部楼层
    好牛逼的感觉
  • TA的每日心情
    抱抱
    2015-10-9 09:40
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    1

    主题

    19

    帖子

    3205

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3205

    发表于 2015-7-17 11:48:17 | 显示全部楼层
    不错  但是不会弄

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


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

  • TA的每日心情
    大哭
    2016-10-20 09:50
  • 签到天数: 50 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    46

    帖子

    6482

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    6482

    发表于 2015-7-17 13:14:31 | 显示全部楼层
    感谢分享!

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


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

  • TA的每日心情
    抱抱
    前天 09:17
  • 签到天数: 617 天

    连续签到: 6 天

    [LV.9]已臻大成

    42

    主题

    1234

    帖子

    11万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    117216

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

    发表于 2015-7-17 13:37:07 | 显示全部楼层
    好东西。。

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


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

  • TA的每日心情
    大哭
    2016-2-22 14:36
  • 签到天数: 98 天

    连续签到: 1 天

    [LV.6]渐入佳境

    37

    主题

    841

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    77741

    天猫美工热心会员最佳新人活跃会员

    发表于 2015-7-17 13:38:57 | 显示全部楼层
    谢谢,非常强大,天猫也可以用,只是店铺首页中,首页两字不显示,其他页面一切正常

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


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

  • TA的每日心情
    加油
    2016-3-20 23:54
  • 签到天数: 149 天

    连续签到: 1 天

    [LV.7]炉火纯青

    3

    主题

    150

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    22613

    最佳新人热心会员

    发表于 2015-7-17 13:59:52 | 显示全部楼层
    谢谢,非常强大,天猫也可以用,只是店铺首页中,首页两字不显示,其他页面一切正常

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


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

  • TA的每日心情

    2016-11-16 15:40
  • 签到天数: 99 天

    连续签到: 2 天

    [LV.6]渐入佳境

    16

    主题

    336

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    43960

     楼主| 发表于 2015-7-17 14:08:24 | 显示全部楼层
    等待 发表于 2015-7-17 13:59
    谢谢,非常强大,天猫也可以用,只是店铺首页中,首页两字不显示,其他页面一切正常
    ...

    首页两字不显示?

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


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

  • TA的每日心情

    2016-3-19 17:09
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]略有小成

    32

    主题

    447

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    11303

    发表于 2015-7-17 14:14:45 | 显示全部楼层
    好炫酷!

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


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

  • TA的每日心情
    臭美
    2016-5-14 09:27
  • 签到天数: 48 天

    连续签到: 1 天

    [LV.5]略有小成

    6

    主题

    692

    帖子

    9246

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    9246

    热心会员灌水之王最佳新人

    QQ
    发表于 2015-7-17 14:25:03 | 显示全部楼层
    路过                                
    在一片苍茫的马勒戈壁上,生活着一群快乐滴草泥马。
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-5 04:28 , Processed in 0.123856 second(s), 27 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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