有赞新零售社区

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

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

把石头咬哭 2015-04-30 70154 浏览 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 ··· 回复
    家几   青铜   2017-11-02 | 只看该作者
    谢谢,谢谢谢谢

      15981881729   青铜   2017-11-07 | 只看该作者
      学习前先回复一下!

        ddddddddddddddddddddddddddd

          UNES优理氏   青铜   2017-11-15 | 只看该作者

            小淘仙   青铜   2017-11-28 | 只看该作者
            感谢分享,学习学习

              一可一果   青铜   2017-12-04 | 只看该作者
              这个实用,我要看看。
              一可亦为情  一果皆自然

                看看效果

                  6666666666666666

                    刘建雄u   青铜   2017-12-08 | 只看该作者

                    谢谢分享!

                      划算   青铜   2017-12-17 | 只看该作者
                      6666666666666666

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

                        本版积分规则

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

                        • 评分

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

                        复制成功