纯CSS打造淘宝导航菜单栏

薛定谔的Bug
• 阅读 102

店铺装修-PC端-基础页-首页-装修页面:编辑“菜单”模块-显示设置,粘贴如下CSS:

 /* 导航条背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #3F7FCE;}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{
    background: none repeat scroll 0 0 #3F7FCE;    
    color: #C2D5ED;
    font-family: 微软雅黑,黑体;
    font-weight: bold;
    font-size: small;}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{    
    border-width: 0 1px 0 0;
    border-color: #3871B7;
    border-style: solid;
    background: #3F7FCE;
    font-size: 14px;}
.skin-box-bd .menu-list .menu-hover .link{background: none repeat scroll 0 0 #3487ed;}

/*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .link .title{color:#fff}
.skin-box-bd .menu-list .menu-selected .link .title{background: none repeat scroll 0 0 #3F7FCE;}
.skin-box-bd .menu-list .menu-hover .link .title{background: none repeat scroll 0 0 #3487ed;}

/*下拉菜单图标*/
.skin-box-bd .menu-list .menu .link .popup-icon{
    height: 12px;
    width: 12px;
    background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) -14px -179px no-repeat;
}
.skin-box-bd .menu-list .menu-hover .link .popup-icon{
    height: 12px;
    width: 12px;
    background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) -14px -199px no-repeat;
}
/*二级菜单*/
.menu-popup-cats .sub-cat{background: none repeat scroll 0 0 #2c5990;}
.menu-popup-cats .sub-cat-hover{background: none repeat scroll 0 0 #3487ed;color: #FFF;}
.menu-popup-cats li.sub-cat-hover::before{content: '%3e';}

/*所有分类背景色*/
.skin-box-bd .all-cats .link{background: none repeat scroll 0 0 #ff4400;padding: 0 15px;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{
    color: #f5f5f5;
    font-family: 微软雅黑,黑体;
    font-weight: bold;
    font-size: small;
}

/*所有分类-下拉菜单图标*/
.skin-box-bd .all-cats .link .popup-icon {
    height: 12px;
    width: 12px;
    background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) 0 -220px no-repeat;
}
.skin-box-bd .all-cats-hover .link .popup-icon {
    height: 12px;
    width: 12px;
    background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) 0 -240px no-repeat;
}
/*所有分类-二级菜单*/
.skin-box-bd .popup-content .cats-tree .fst-cat{background: none repeat scroll 0 0 #2c5990;}
.skin-box-bd .popup-content .cats-tree .cat-hd-hover{background: none repeat scroll 0 0 #3487ed;color: #FFF;}
/*所有分类-三级菜单*/
.skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a{ background: none repeat scroll 0 0 #2c5990;color: #C2D5ED; }
.skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd-hover a{background: none repeat scroll 0 0 #3487ed;color: #FFF;}

 
自定义导航示例:https://hotshop.bbs.taobao.co...

进入CSS导航在线生成工具页面(http://taobaokaidian.com/tool... 如果不能点击打开,请复制网址到时浏览器中打开),
想了解更多样式,可以来这里学习css : http://www.w3cschool.cn/css_i...
 
转载于猿2048:➩《纯CSS打造淘宝导航菜单栏》

点赞
收藏
评论区
推荐文章
小梁同学 小梁同学
3年前
SpringCloud+SpringBoot b2b2c 分布式微服务商城电商之手机端首页模块设计分析
近期我参与了公司电子商务平台中“首页”模块设计,电商平台首页功能大概分为几个区域,如下:一、导航区域:左上角定位入口搜索功能入口消息通知入口商品分类入口二、广告区域:Banner滚动广告,通过后台发布,可以连接:商品、外部H5连接、店铺、开店、其他活动等三、二级频道模块区域:平台设置了:特惠商品区、品质生活、9块9、校园专区、套餐体验、一县一特、生活
菜园前端 菜园前端
2年前
什么是 CSS?
原文链接:什么是CSS?CSS指层叠样式表(CascadingStyleSheets),理解为CSS样式就可以了。CSS样式有什么作用呢?比如我们在页面中添加了一个div,我想给这个div设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过CSS样式来
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
Axure中怎么制作锚点
实现目标点击导航条不同的菜单,页面跳到菜单相应的位置,实现页面自动滚动。1. 拖入编辑区3个矩形,并相应命名为菜单1,菜单2,菜单3;!(https://oscimg.oschina.net/oscnet/06f0b4fbaf28e43de8bbf44d62d356f0f27.png)2. 再新建3个想要制作的文本框准备进行
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
CSS的相对定位和绝对定位(position)
什么是定位呢?定位(position),故名思议,就是确定元素在页面中的位置。CSS的常用定位有两种,一种是相对定位,一种是绝对定位。下面我们看例子1.<html2.<head3.<style4.div0{5./设置背景色为黄色/6.backgrou
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
淘宝天猫店铺所有商品接口(整店商品采集接口)代码展示
淘宝店铺所有商品接口,淘宝整店商品接口,天猫店铺所有商品接口,天猫店铺商品接口,淘宝商品详情接口,天猫商品详情接口,淘宝店铺详情接口,天猫店铺详情接口,淘宝店铺详情接口,天猫店铺详情接口
如何批量复制淘宝商品上传上架到虾皮 shopee,淘宝商品采集上架虾皮 (轻松学会宝贝复制技巧)
今天,入驻虾皮的商家越来越多,且很多的shopee店主在国内都开了淘宝店,当shopee店铺入驻成功后,想把淘宝店铺的商品搬到shopee,怎么搬呐?方法/步骤方法1:用软件上架整理你想要采集的店铺首页链接为TXT文本格式,存放在桌面。2.打开登录软件,进
百亿补贴通用H5导航栏方案 | 京东云技术团队
在移动端页面中,由于屏幕空间有限,导航条扮演着非常重要的角色,提供了快速导航到不同页面或功能的方式。用户也通常会在导航条中寻找他们感兴趣的内容,因此导航条的曝光率较高。在这样的背景下,提供一个动态灵活的导航条,为产品赋能,变得尤其重要。
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
薛定谔的Bug
薛定谔的Bug
Lv1
青山一道同云雨,明月何曾是两乡。
文章
3
粉丝
0
获赞
0