有赞新零售社区

发帖
聊天专版»第319期:烧脑秘籍┃DIY悬浮菜单,及单页定位设置教程!

第319期:烧脑秘籍┃DIY悬浮菜单,及单页定位设置教程!

有赞•一发 2016-05-13 10958 浏览 30 评论 | 只看楼主 [打印]    

| 有 | 赞 | 小 | 报 |
剖析实战案例,玩转微电商
有赞小报—今夜碎碎念


放假了吧??想好去那里玩了么?
小编我不放假!!!那么,发一篇很烧脑的技术贴,让你在五一长假前夕,酸爽一把~!
拉个仇恨,哈哈哈哈,祝大家五一劳动节快乐,么么哒~

DIY悬浮菜单,及单页定位设置教程!

本文作者:镊子
作者微信:hitler737
文章来源:镊子的有赞小报专栏

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

好,言归正传

有赞微页面可以添加自定义悬浮菜单吗?当然可以!

有赞微页面上的按钮,点击之后,可以不进行跳转页面,直接定位到本页面的某个固定位置吗?当然可以!

通过本教程,就可以轻松实现以上两个功能,想看效果的亲,可以扫下面的二维码查看效果:

震惊不?酷炫酸爽不?既然回来了,这么牛逼的效果是如何实现的呢?请继续往下看!

待我来一步一步为你讲解【源码请点击阅读原文,提取密码3no4】:

1、下载源码后,打开悬浮菜单定位代码,并复制里面的代码;

2、编辑微页面,添加富文本,输入“你好”,然后鼠标在空白处点击右键——审查元素(或检查):


3、按Ctrl+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个“你好”:

4、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML

5、把里面的内容全部删掉,然后把源码粘贴进来

6、富文本里面显示的效果如下
(PS:悬浮菜单有了之后,接下来就要添加锚点了,锚点就是用来标记的,点击菜单,直接定位到锚点上,这样就实现了菜单的定位,接下来就需要添加锚点)

7、找到需要定位到图片的地方,在图片前面输入“你好”,鼠标在页面空白处点击右键——审查元素:(PS:需要定位的图片,必须在富文本里面添加!)

8、按CTRL+F ,打开搜索栏,输入“你好”,一共找到2个,点击向下,找到第二个“你好”(和第三步一模一样)

9、鼠标放到“你好”上面一行的<p>处,然后右键——Edit sd HTML

10、把“你好”删掉,替换为<a name="001"></a>(PS:<a name="001"></a>就是一个锚点,名字叫做001,当然也可以替换为其他的名字,但是菜单的代码里面也要替换为这个名字,不然是无法链接到这个锚点的!)

11、第7步到第10步是设置的第一个锚点,用同样的方法,添加其他三个锚点,其他的三个锚点依次为<a name="002"></a>、<a name="003"></a>、<a name="004"></a>

12、点击“上架”,大功告成!

最后,本功能第一来源为有赞商家:赵小姐家的店,技术无罪,把发现的最好的分享给大家!如有冒犯,请联系有赞小报一发沟通删除。

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

本教程由有赞拍档-疾风文化编写,下载后如遇操作问题,可扫码交流。


本文作者:镊子,有赞拍档—疾风文化创始人,有赞小报河南省特约记者,有赞学堂认证讲师。2014年踏足微电商,做过推广,干过实操,对有赞在多行业的应用和解决方案方面积累了丰富的经验,对有赞多个功能模块的玩法有着深度的研究和丰富的经验!
有赞小报记者专栏上线啦!


关注“有赞说”微信公众号。
路径:点击“记者专栏”—在打开页面,对着小报记者的头像摸一下,就可以查看每位大神的作品啦。



| 有 | 赞 | 小 | 报 |
剖析实战案例,玩转微电商

| 有料 | 有趣 |
有赞小报文章和教程均由作者授权发布
版权一律归原作者所有
转载授权、商务合作、加入有赞小报编辑部
联系邮箱:yifa@youzan.com
本帖最后由 有赞•一发 于 2016-5-13 15:30 编辑
用手机打开
收藏 313 ··· 回复
    七夜真   青铜   2016-05-14 | 只看该作者
    感谢分享

      贼森   青铜   2016-05-14 | 只看该作者
      这个不错  感谢分享

        1ce31b5ecfb1   青铜   2016-05-15 | 只看该作者
        你的这个方法真的太好了!可惜我搞了一个晚上也没能达到自己想要的效果
        有两个问题请你帮忙解答下:
        1、我直接复制你的代码加进去之后,菜单总是被其他模块覆盖,并不能浮在最顶层
        2、链接只能采用锚点的形式链到本页内吗?不能链接其他微分类页面?

          丸仔熊好呷   白银   2016-05-17 | 只看该作者
          菜单能否悬浮在上端其他位置而不是底部菜单栏

            1ce31b5ecfb1   青铜   2016-05-17 | 只看该作者
            丸仔熊好呷 发表于 2016-5-16 16:30
            菜单能否悬浮在上端其他位置而不是底部菜单栏


            代码第一句的bottom:0px改为top:0px就会在顶部了..

              河南客来乐   青铜   2016-05-18 | 只看该作者
              源码下载地址在哪里

                晋文源图书   白银   2016-05-24 | 只看该作者
                阅读原文在哪里?

                  誓语   白银   2016-05-24 | 只看该作者
                  代码在哪里???

                    贾闻好   青铜   2016-05-25 | 只看该作者
                    谢谢作者回复:关注疾风文化(公众号blast99)  回复“代码”  就可以看到

                      移动购_movego   青铜   2016-06-06 | 只看该作者
                      弄了,但是菜单不出现怎么回事

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

                        本版积分规则

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

                        • 评分

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

                        复制成功