米色带你突破淘宝/天猫店铺导航全屏

用户头像
武汉/设计爱好者/9年前/1332浏览
米色带你突破淘宝/天猫店铺导航全屏

店铺默认导航条,突破950限制,真的很难吗

曾几何时,你是否有过这样的烦恼;曾几何时,是否有过那样的忧桑。


辛辛苦苦设计的店铺页面效果,然后满怀欣喜去装修到店铺。却发现导航条只能做990或者950宽度,不能全屏,并且超过950还能点击。


那怎么才能,突破950或者990限制,超过外范围也能实现点击呢?就想下面这样


undefined


一:原因分析

跟店铺自定义模块不能全屏的原因是一样的,都是因为限制了宽度,并且添加了溢出隐藏,造成不能全屏。

解决办法也很简单,跟自定义模块全屏原理一样,不过我们是通过相对定位来实现全屏。

二:代码演练

方法1:

如果你店铺不是逃避基础版的,那么我们可以直接进入装修后台,页头设置里面,添加页头背景。这个页头背景就是店招和导航后面的背景图。自己去试试就会知道怎么使用,很简单


方法:2:

只需要找到默认导航条,最外层的框架。也就是class名位 skin-box-bd 的DIV标签。然后设置一些CSS样式就会全屏了、

.skin-box-bd { width:950px; padding:0 485px; position:relative; left:-485px;}

将上面代码,复制放进店铺导航--显示设置里面,点击确定。注意预览看不到效果。发布后会看到全屏效果。

有同志会说,如果我想让导航大于950呢,那么这里米色就以1000px宽度为例,写出代码

.skin-box-bd { width:1000px; padding:0 460px; position:relative; left:-460px;}


三:注意事项

  1. 因为这里只是实现导航全屏效果,所以代码里面只实现了全屏效果。如果还需要实现更复杂的效果,所有分类和右侧分类相聚很开,等效果。那就需要有一定的代码基础,自己编写CSS代码实现了。

  2. 预览可能会看不到效果,发布后即可看到,全屏导航效果

  3. 淘宝允许我们通过CSS代码修改默认导航的效果,所以理论上我们可以在店铺里,实现任何的导航条效果

  4. 我不建议用自定义导航代替默认导航,因为自定义导航,详情页里面,没办法显示分类的弹出子分类。如果你们公司无所谓,那么可以自定义导航

大概能想到的就这么多,有上面问题,可以直接留言回复


2
阅读原文
|
举报
|
4
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
网页背景
卡通女孩与网页表格3D渲染
男生和女生站在网页面前矢量扁平插画
网页图标
3D风格时尚电子商务设计元素
卡通风格网页页面3D渲染
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
卡通风格网页页面3D渲染
一个男生和两个女生站在网页前面打招呼矢量
网页电商背景矢量插画
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
卡通风格网页页面3D渲染
卡通女孩与网页表格3D渲染
三位美女围着网页看信息矢量插画
三个青年正在装修网页矢量插画
浏览电脑网页的元素
商务网页
一个人拿着优惠券准备支付购物电商矢量插画
网页设计——纸杯蛋糕
户外旅行飞机情侣假日出行
 网页背景
三个青年站在网页周边矢量插画
新年快乐送福网页矢量图banner
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
男生坐在网页面前办公矢量插画
你可能喜欢
大家都在看
登录注册