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

有赞商家社区 - 做生意,用有赞

发帖
运营杂谈»高级版 豪华下拉弹出式多级菜单设计【商品分组】

[运营工具箱] 高级版 豪华下拉弹出式多级菜单设计【商品分组】

老沈 2015-11-20 31767 浏览 604 评论 | [显示全部楼层] [打印]    
"text/javascript" class="js-replyreload">replyreload += ',' + 1565652;

在上一版【初级版】分组菜单发布后,有一些同学觉得还是不过瘾,希望能更人性化,客户体验更好一些,像pc端那种下拉弹出式多级菜单,高大上的炫酷体验!
先上效果图


实例1.png
实例2.png
借鉴社区lony51同学的思路,老沈整理出详细文字版教程及视频教程,中间有一些非常小的细节一定要注意,否则有一点点差错,也实施不成功。
首先,你要耐心,其次,你要细心,然后,那就开工啦!
先设计好的商品分组,设计好商品分组属性,这个和初级版的前半部分差不多。
整理好分级分组的逻辑思维,示例如图
分组图片
【1】首先,我们先把商品登陆到商品库里,暂时不用管分组及微页面的设置。
【2】然后去设置商品分组,把每一级都添加为商品分组,因为一个商品可以属于多个商品分组
那么我们就可以把商品的商品分组属性都加上。
例如:甘肃花牛苹果属于【水果】【国产水果】两个商品分组
其他商品以此类推

【3】然后,到店铺,自定义页面模块,新建自定义模块,输入“你好”

【4】在富文本【之外】右键单击,弹出菜单,点击审查元素
右键单击 审查元素.png
【5】再审查元素里,【Ctrl+f】搜索“你好”,点击 2
提醒:搜索你好,会出来2个你好,一定要在右侧的下拉箭头点击一下,第二个你好,才是我们要找的
你好 2.png

【6】然后鼠标挪到代码 【你好】上,右键单击,到【edit as html】去编辑替换代码

右键单击 审查元素2.png

【7】然后替换成你自己的代码。代码源文件
可以下载编辑替换成自己的。
链接:http://pan.baidu.com/s/1hqoBpCo
密码:6mx3

修改代码,然后复制,到审查元素里的 【edit as html】你好,覆盖粘贴

代码的制作1.png
代码的制作2.png

【8】然后空白处点击鼠标左键

代码的制作3.png

【9】然后编辑框点击预览

效果图.png

【10】然后保存
然后加到任何页面
然后就完工大吉

重点来了代码不熟悉咋办,怎么修改,看图说明,要是还不明白,那就么办法了,我已经尽了最大努力的详尽的讲解整个过程了

首先,下载代码,【回帖】就可以下载了,回帖是一种美德
游客,如果您要查看本帖隐藏内容请回复

二 修改顶部及一级菜单和二级菜单链接及文字,

1.png
2.png
三,保存,复制,粘贴到应用处,就ok了

再升级一步,可以微商城全局实现,到公共广告设置,添加富文本,把以上步骤在重复一遍.......

还想再升级么?全局,悬浮,任意位置悬浮多级菜单按钮,那就回帖点赞哦~
有更好的想法,或者你有更多的想法,或者你实现了更帅的多级菜单,来贴一下你的效果图吧

来来来,交流一下使用心得吧,加我微信:59001643



感谢lony51 同学提供思路进行借鉴及扩展,lony51同学的微信及多级下拉式效果图

效果2.jpg
本帖最后由 老沈 于 2017-5-21 18:09 编辑

点评

绿风大熊 赞  发表于2015-11-24 02:30
宜淼之家-石头 这篇帖子很好很实用!  发表于2015-11-20 09:33
我是有赞学堂高级讲师、有赞志愿者
加微信好友 【59001643】 常交流
点这→我的学堂课程
提问请先戳这儿——》【搜索】
您的大多数问题,新手学堂都有答案,戳这儿——》【有赞学堂】
    大赞。GET

    评分

    参与人数 1+1 收起 理由
    老沈 + 1 赞一个!

    查看全部评分


      MISS NAMI   青铜   2015-11-20 显示全部楼层
      高产,赞赞滴!Get

      点评

      剑锋网络工作室 赞一个~  发表于2015-11-20 15:49

      评分

      参与人数 1+1 收起 理由
      老沈 + 1 赞一个!

      查看全部评分


        老沈,你是大家的榜样

        评分

        参与人数 1+1 收起 理由
        老沈 + 1 赞一个!

        查看全部评分

        我是 成都有赞服务商、有赞学堂高级讲师、有赞成都商盟理事
        拍档主页[url=http://fuwu.youzan.com/detail?id=264【点击直达官方主页】
        微信:13378127913
        微商城搭建、推广运营、人才培养、策划咨询。
        讲师主页:【点击直达-视频】[url=http://bbs.youzan.com/home.php?mod=space&uid=G7d5C09&do=thread&view=me&fro

          太牛了,学习

          评分

          参与人数 1+1 收起 理由
          老沈 + 1 赞一个!

          查看全部评分


            沈哥威武!!

            评分

            参与人数 1+1 收起 理由
            老沈 + 1 赞一个!

            查看全部评分


              老沈威武!

              评分

              参与人数 1+1 收起 理由
              老沈 + 1 赞一个!

              查看全部评分


                老虎   VIP商户   2015-11-20 显示全部楼层
                老沈高能+高产啊😱

                评分

                参与人数 1+1 收起 理由
                老沈 + 1 赞一个!

                查看全部评分


                  lee小豪   青铜   2015-11-20 显示全部楼层
                  有你,有赞!

                    用有赞都学会编程了
                    河北龙恩网络有赞微商城,微信代运营、插件等!微信号/电话:18533173398

                      看看什么情况
                      重庆永川黄瓜山中华农庄欢迎您

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

                        本版积分规则

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

                        • 评分

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

                        复制成功