【7.0.5.0】如何设计两层菜单的母版页效果？

登录

场景：我们设计的应用首页，是有两级菜单的，一级在顶部（A区域），二级在侧面（B区域）：

需求：因为每个一级菜单的功能都是不同的，对应的二级菜单也不相同，我希望点击一级菜单以后，二级菜单可以随之而变化。
比如我点击“拆解生产”后，二级菜单是这样的：

在点击“基础设置”后，二级菜单变为这样：

问题:因为母版页不能嵌套母版页，我把一级菜单放到母版页上后，二级菜单没有办法再放到母版页上了。此时应当如何设计呢？

Timothy.Xu · Timothy.Xu

您好，这个其实母版页也只需要一层，也就是放置一级菜单就可以了。二级菜单我们可以结合页面容器实现。具体做法如下：

1、首先我们根据楼主的需求构建一个只有一级菜单的母版页，这里的菜单需要设置为水平方向：

2、创建一个页面，这个页面只放一个页面容器：

3、假设一级菜单只有3个选项，我们可以先搭建第一个选项的页面。需要在左侧放置第一个二级菜单，从这个页面复制，并修改出其他菜单的页面：

4、现在只给最开始的页面容器页面设置母版页，并给页面容器添加一个默认值，作为启动时的首页：

5、母版页中的一级菜单，点击时的效果就是给页面容器传递不同的值。因为页面容器和母版页在不同的位置，所以我们传值的时候，需要引用名称。给页面容器设置一个名称：

并给母版页中的一级菜单添加设置单元格属性命令：

6、这样功能其实就已经实现了。最后再做一些收尾工作，比如页面的自适应布局等。我们可以给母版页、页面容器页面以及每个二级菜单页面都分别添加一个范围模式的行和列：

这里有一个有关流式布局的小提示：有些同学会使用页面拉伸模式作为一个简单的自适应布局替代：

这个功能是比较方便的通用配置，但是只能全页面生效，当我们希望做一些更细化的效果，比如菜单宽度不变这种，这个拉伸模式就不适用了，需要用到上面的范围模式。但是我们要注意的是，范围模式和页面拉伸模式是不能共存的，因为二者都可以实现响应式布局的效果，而原理不同，一起使用会产生冲突。如果这么设计了，我们会在运行的时候给出提示，并且让页面拉伸模式的设置无效化。

这里算是一个流式布局的小要点吧

至此，楼主的需求就全部实现了：

附上demo：

注：本贴是代为楼主发贴，楼主下次遇到了问题也可以尝试亲自按照这种方式发贴提问，这样在论坛中，我们可以很清晰地在一个页面展示问题的需求、思路、解法等，同时也可以文字、截图、代码混排，这样查看问题也会更清晰一些。论坛的贴子留存下来，无论是楼主作为知识库，还是其他遇到类似的问题的用户查阅，都是十分方便的~

Li.Zhou · Li.Zhou

可以参考这个试试
这种动态菜单是如何实现的？
https://gcdn.grapecity.com.cn/fo ... 4&fromuid=63778

zyk.Zhou · zyk.Zhou

结合页面容器
参考https://gcdn.grapecity.com.cn/showtopic-72757-1-247.html

Freya.Li · Freya.Li

本帖最后由 Freya.Li 于 2021-10-8 15:54 编辑

给咱们再提供一种使用母版页来实现这个功能的方法。实现思路就是对于顶部区域的每个菜单目录，点击时对应的左侧目录是一定的，所以我们可以利用多个母版页来实现
话不多说先展示实现效果：

以上图为例，有三个顶部目录，因此有三个对应的左侧菜单栏，所以我们设置三个母版页
工作版母版页：

给工作版目录下的页面设置统一的母版页：工作版母版页

库存母版页：

质量母版页：

给三个母版页顶部绑定点击菜单跳转的页面，比如点击工作版，默认跳转工作版下页面1_1

这时候你会发现在点击顶部菜单栏切换的时候，选中的效果总是在第一个菜单上，这是因为其实每个母版页是不同顶部菜单栏，默认会选中第一个

因此我们需要给三个母版页分别设置顶部菜单的默认项，工作版母版页的默认项为工作版菜单，库存母版页的默认项为库存菜单，质量母版页的默认项为质量菜单。

工程文件参考附件

nsc117 · nsc117

每个实现都很帮，个人认为设置多个母版页的方式也很灵活，调整起来也很方便。

Chelsey.Wang · Chelsey.Wang

Freya.Li 发表于 2021-10-8 15:50
给咱们再提供一种使用母版页来实现这个功能的方法。实现思路就是对于顶部区域的每个菜单目录，点击时对应的 ...

		自动登录	找回密码
密码			立即注册

[已处理] 【7.0.5.0】如何设计两层菜单的母版页效果？

最佳答案

6 个回复

本帖子中包含更多资源

本帖子中包含更多资源

评分

讲师达人

悬赏达人

微信认证勋章

元老葡萄

活字格认证

活字格高级认证

圣诞拼拼乐