请选择 进入手机版 | 继续访问电脑版

米色带你突破店铺导航全屏 

2017-09-12 19:10 发布

经验交流 /[电商代码]
239 2 1

83

帖子

22

听众

302

米币

超级版主

Rank: 8Rank: 8

积分
632
米色设计 发表于 2017-9-12 19:10:38 | 显示全部楼层 |阅读模式
友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!

在美设网注册账号,查看完整图文信息哦

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
timg.jpg

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

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

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

000.png

一:原因分析
跟店铺自定义模块不能全屏的原因是一样的,都是因为限制了宽度,并且添加了溢出隐藏,造成不能全屏。
解决办法也很简单,跟自定义模块全屏原理一样,不过我们是通过相对定位来实现全屏。

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

方法:2:
只需要找到默认导航条,最外层的框架。也就是class名位 skin-box-bd 的DIV标签。然后设置一些CSS样式就会全屏了、
  1. .skin-box-bd { width:950px; padding:0 485px; position:relative; left:-485px;}
复制代码

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

有同志会说,如果我想让导航大于950呢,那么这里米色就以1000px宽度为例,写出代码
  1. .skin-box-bd { width:1000px; padding:0 460px; position:relative; left:-460px;}
复制代码


三:注意事项
  • 因为这里只是实现导航全屏效果,所以代码里面只实现了全屏效果。如果还需要实现更复杂的效果,比如我淘宝店的效果 http://cisdesign.taobao.com 所有分类和右侧分类相聚很开,等效果。那就需要有一定的代码基础,自己编写CSS代码实现了。
  • 预览可能会看不到效果,发布后即可看到,全屏导航效果
  • 淘宝允许我们通过CSS代码修改默认导航的效果,所以理论上我们可以在店铺里,实现任何的导航条效果
  • 我不建议用自定义导航代替默认导航,因为自定义导航,详情页里面,没办法显示分类的弹出子分类。如果你们公司无所谓,那么可以自定义导航

大概能想到的就这么多,有上面问题,可以直接留言回复
公众号二维码.jpg

手指按住图片,扫描二维码 关注米色公众号

回复

使用道具 举报

B Color Smilies

全部评论2

    2

    帖子

    0

    听众

    3

    米币

    新手上路

    Rank: 1

    积分
    18
    icqhx 发表于 2017-9-13 01:08:11 | 显示全部楼层
    友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!
    非常酷哦,不顶对不起良心












    专业代发帖子,发帖宣传,论坛发帖,网络推广,外链代发。
    联系QQ:188662616   微信号:188662616

    1. 论坛:发帖·顶贴·盖楼·维护·回复·评论·沉帖·负面压制·新闻评论·置顶加精等等~
    2. 微博:加粉·直发·转发·评论·转评·话题·阅读量·投票·收藏·点赞·等等~
    3. 微信:加粉·转发·点赞·阅读量·分享·投票·等等~
    4. 点击:帖子点击率·视频点击率·博客点击率·网站IP·等等~
    5. 视频:评论·点赞·等等~
    6. sns :转发·评论·等等~
    7. 问答:百度知道·360问答·搜搜问答·等等~
    8. 投票:各种网络评选投票·等等~
    9. 博客:博客发帖·评论·高等级博客发帖
    10.qq群:各类群发
    11.贴吧 :加关注·包月签到·包年签到·提高贴吧排名

    承接各类网络任务!人手多,老手多,多年执行经验,全年无休假。
    联系QQ:188662616  微信号:188662616

    回复

    使用道具 举报

    5

    帖子

    0

    听众

    4

    米币

    新手上路

    Rank: 1

    积分
    22
    jjsyi 发表于 2017-9-13 10:11:05 | 显示全部楼层
    友情提示: 如果有任何不懂或者问题要问的, 请在相应的在线求助发表新帖提问, 谢谢合作!!!
    基础版该怎么实现呢
    回复

    使用道具 举报

联系
我们
快速回复 返回顶部 返回列表