有赞新零售社区

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

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

把石头咬哭 2015-04-30 70088 浏览 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 ··· 回复
    Sven.liu   青铜   2015-10-30 | 只看该作者
    请问在哪里能看到预览效果


      酷炫~还是希望能出折叠菜单~~~

        fbfa98329465   游客   2015-10-31 | 只看该作者
        啊啊啊啊啊啊

          林嘉泽nick   青铜   2015-11-01 | 只看该作者
          我的确很需要这个

            花爷爷   游客   2015-11-02 | 只看该作者

              大宝-   游客   2015-11-02 | 只看该作者
              草根电商里已经学习过很多东西了

                0917b32c233f   青铜   2015-11-02 | 只看该作者
                不错的样子

                  过来学习学习了

                    03e9c8318467   游客   2015-11-06 | 只看该作者
                    呵呵哈哈哈哈哈哈哈哈哈

                      钻汇   青铜   2015-11-06 | 只看该作者
                      看看?   还是看看

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

                        本版积分规则

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

                        • 评分

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

                        复制成功