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

有赞新零售社区

发帖
聊天专版»魔改有赞|DIY悬浮菜单单页定位设置教程!

魔改有赞|DIY悬浮菜单单页定位设置教程!

认证拍档-疾风文化 2016-04-06 3853 浏览 8 评论 | [显示全部楼层] [打印]

各位程序猿先原谅我没用术语,我担心很多人看的标题锚点,代码啥的直接不玩这个牛逼功能了!

好,言归正传
   有赞可以添加自定义悬浮菜单吗?当然可以!
有赞页面上的按钮,点击之后,可以不进行跳转页面,还是定位到本页面的某个位置吗?当然可以!
   通过本教程,就可以轻松实现以上两个功能,想看效果的亲,可以扫下面的二维码查看效果:
1.jpg



   这样的效果是如何实现的呢?请继续往下看!
   待我来一步一步为你讲解:
第一步、打开悬浮菜单定位代码,并复制里面的代码;
2.jpg
第二步、在有赞的微页面编辑页面,添加一个富文本编辑器,输入“你好”,然后鼠标在空白处点击右键——审查元素

3.jpg
第三步、按CTRL+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个你好”:
4.jpg
第四步、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML
5.jpg
第五步、把里面的内容全部删掉,然后把第一步复制的代码粘贴过来,
6.jpg
第六步、富文本里面显示的效果如下:
7.jpg
(PS:悬浮菜单有了之后,接下来就要添加锚点了,锚点就是用来标记的,点击菜单,直接定位到锚点上,这样就实现了菜单的定位,接下来就需要添加锚点

第七步、找到需要定位到图片的地方,在图片前面输入“你好”,鼠标在页面空白处点击右键——审查元素:(PS:需要定位的图片,必须在富文本里面添加!
8.jpg
第八步、按CTRL+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个你好”(和第三步一模一样)

第九步、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML
9.jpg
第十步、把“你好”删掉,替换为<a name="001"></a>(PS:<a name="001"></a>就是一个锚点名字叫做001,当然也可以替换为其他的名字,但是菜单的代码里面也要替换为这个名字,不然是无法链接到这个锚点的!
第十一步、第七步到第十步是设置的第一个锚点,用同样的方法,添加其他三个锚点,其他的三个锚点依次为<a name="002"></a><a name="003"></a><a name="004"></a>
第十二步、点击“上架”,大功告成!

最后,本功能第一来源为有赞商家:赵小姐家的店,技术无罪,把发现的最好的分享给大家!如有冒犯请联系版主删除
10.jpg
本教程代码由有赞拍档-疾风文化编写,获取代码请扫码联系

特别说明:悬浮菜单位置可以DIY,样式可以DIY,颜色可以DIY,甚至可以直接做成图标图片,位置可以放最下方做导航,可以放最上方类似天猫的引导和分类,也可以放左边右边做客服或者双11式的大活动引导页,欢迎各位码农对本代码魔改!建议小报先习会本教程再进阶修改!

有赞拍档:河南疾风文化传播有限公司
我是→有赞拍档、有赞认证讲师、有赞小报记者
专注提供企业微电商的定位,微商城装修,推广,代运营,方案策划,020传统企业线上线下落地解决方案于一体,帮助企业打造属于自己的移动电商平台
个人微信,QQ,电话均为:15638562705
我在qq群:194903210。欢迎大家来群一起交流,

      涂鸦者   青铜   2016-04-06 显示全部楼层
      代码文件能共享一下吗!

        涂鸦者   青铜   2016-04-06 显示全部楼层
        代码文件能共享一下吗!


            代码问价家好友联系!
            有赞拍档:河南疾风文化传播有限公司
            我是→有赞拍档、有赞认证讲师、有赞小报记者
            专注提供企业微电商的定位,微商城装修,推广,代运营,方案策划,020传统企业线上线下落地解决方案于一体,帮助企业打造属于自己的移动电商平台
            个人微信,QQ,电话均为:15638562705
            我在qq群:194903210。欢迎大家来群一起交流,

              关注 blast99
              回复  代码  即可获取
              有赞拍档:河南疾风文化传播有限公司
              我是→有赞拍档、有赞认证讲师、有赞小报记者
              专注提供企业微电商的定位,微商城装修,推广,代运营,方案策划,020传统企业线上线下落地解决方案于一体,帮助企业打造属于自己的移动电商平台
              个人微信,QQ,电话均为:15638562705
              我在qq群:194903210。欢迎大家来群一起交流,


                  王慕白   青铜   2019-03-01 显示全部楼层

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

                    本版积分规则

                    复制链接
                    新浪微博
                    QQ空间
                    微信扫码
                    • 回复

                    • 评分

                    客服工作时间是9:00-18:00,客服妹子当前不在线,若不能及时回复请谅解。试试右上角的搜索吧,论坛有丰富的经验贴、公告贴,相信一定能够帮到您~

                    复制成功