有赞新零售社区

发帖
运营杂谈»【原创】教你如何在有赞店铺实现折叠菜单的效果

【原创】教你如何在有赞店铺实现折叠菜单的效果

把石头咬哭 2015-04-30 70014 浏览 784 评论 | 只看楼主 [打印]    关闭
"text/javascript" class="js-replyreload">replyreload += ',' + 346184;

回复获取更多自定义样式代码修改:
游客,如果您要查看本帖隐藏内容请回复


扫一扫二维码,来预览一下效果吧!



具体步骤如下:

1.打开一个店铺的有赞后台,在顶部导航找到【店铺】,进入【店铺】选项后,在左侧导航找到【自定义页面模块】,在【自定义页面模块】页面,点击【新建自定义页面模块】。
然后,添加【富文本】编辑框,在编辑框随意输入几个字符,例如“折叠”。

然后,右键点击箭头指向位置,选择【审查元素】。

然后,打开了开发工具,按CTRL+F,输入【contenteditable】,找到项目,打开折叠代码,然后右键点击折叠代码,选择【Edit as HTML】。
将以下代码,粘贴到输入框中。保存即可。然后你想在哪里调用,就可以直接用【自定义模块】来加载吧!



代码如下:
  1. <fieldset style="border: 0px none; padding: 0px;">
  2.     <details>
  3.         <summary style="color:#fff; padding:10px; background-color:#000; cursor:pointer;">
  4.             <span data-brushtype="text" style="font-size:15px; line-height:21px; margin-bottom:15px; text-align:justify; text-indent:28px; white-space:pre-wrap;">折叠样式,点击有惊喜</span>
  5.         </summary>
  6.         <section style="border: 4px solid #000; padding: 2px;">
  7.             <blockquote style="white-space: normal; font-size: 14px; line-height: 25px; padding: 10px 10px; max-width: 100%; border: 0px;">
  8.                 <p>
  9.                     折叠菜单示例!
  10.                 </p>
  11.                 <p>
  12.                     扫描关注微信号,获取相关教程!
  13.                 </p>
  14.                 <p>
  15.                     <img src="http://imgqn.koudaitong.com/upload_files/2015/03/26/FtykxZbh_xT6oOA6S5CmbLuDc07-.jpg!730x0.jpg"/>
  16.                 </p>
  17.             </blockquote>
  18.         </section>
  19.     </details>
  20. </fieldset>
复制代码

如果有疑问,可以随时来找我们咨询!扫一扫来咨询我们吧!

有赞店铺客服链接:
  1. http://wap.koudaitong.com/v2/im?c=wsc&v=2&kdt_id=店铺ID#talk!id=店铺ID
复制代码


悬浮窗口代码:
  1. <p><a href="http://wpa.qq.com/msgrd?v=3&uin=3122942294&site=qq&menu=yes" style=" z-index:9999; text-decoration:none; font-weight:bold; position: fixed; z-index: 999; right: -6px; bottom: 220px; display: inline-block; width: 20px; border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 10px; color: white; font-size: 17px; line-height: 17px; box-shadow: rgb(102, 102, 102) 0px 0px 5px; word-wrap: break-word; padding: 8px 6px; border: 2px solid white; background: rgb(242, 12, 12);">召唤掌柜</a></p>
复制代码

【剑走偏锋】教你如何在有赞店铺实现多客服的效果
【华山论剑】基于有赞店铺开发第三方游戏营销插件
【红包教程】让你的公众号免费拥有发放微信电影票红包的功能

本帖最后由 小草〈草根电商〉 于 2016-6-13 09:42 编辑
用手机打开
收藏 16 ··· 回复
    中艺易购   青铜   2015-06-30 | 只看该作者
    好好好好好好好好好好好好好好好好好好好好好

      青果科技   青铜   2015-06-30 | 只看该作者

      回复获取更多自定义样式代码修改

        ADDSADDINS   青铜   2015-06-30 | 只看该作者
        学习学习学习

          张德浩   青铜   2015-06-30 | 只看该作者
          00000000000000000000

            淘时装好货   青铜   2015-06-30 | 只看该作者
            这个好,i  want

              美琜琥珀   青铜   2015-07-02 | 只看该作者
              又学习了新的东西,感谢楼主的辛苦付出

                美琜琥珀 发表于 2015-7-2 13:19
                又学习了新的东西,感谢楼主的辛苦付出


                谢谢,共同进步

                  拓跋野   青铜   2015-07-05 | 只看该作者
                  肉肉肉肉肉肉肉肉肉肉肉肉

                    淡年   青铜   2015-07-05 | 只看该作者
                    太棒了,很炫的技巧

                      老客   青铜   2015-07-07 | 只看该作者
                      值得学习这个贴纸
                      个人签名

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

                        本版积分规则

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

                        • 评分

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

                        复制成功