怎样用更加简单的方式实现三级折叠菜单的制作与使用
发表时间：2023-11-11 10:04:53
文章来源：炫佑科技
浏览次数：133
菏泽炫佑科技
怎样用更加简单的方式实现三级折叠菜单的制作与使用
前段时间去跟甲方领导开会，当时主要是因为一个项目着急，需要现场修改样机。 在修改过程中，我需要用到三级折叠菜单。 那时我无法修复它。 *后我改变了二级菜单的样式。 我稍微修改了一下，虽然通过了，但是我确实觉得很不好意思。
会后，我紧急研究如何更简单地创建和使用三级折叠菜单。 在这个过程中，我们首先展示了二级菜单的制作过程。
废话不多说，先上效果图（看起来有点单调，如果想要其他效果，欢迎更新~）。
接下来我们来说说制作方法。
1. 使用的组件
Axure 9.0组件库中的矩形、一级菜单图标和向下箭头在阿里巴巴矢量图标库中搜索到。
2、一级菜单制作
用鼠标从.0自带的组件库中拖拽矩形到页面固定位置，在【“样式”页面/工具栏】上设置矩形大小、边框、填充颜色。
[“样式”页面/工具栏]设置菜单名称的字体大小和颜色，[功能区->样式]设置内容和矩形的边距。
选择矩形，单击鼠标右键，选择【交互样式】，在菜单名称的鼠标悬停样式中设置文本颜色，然后单击【确定】。
调整从【阿里巴巴矢量图标库】中搜索到的一级菜单图标的颜色和大小，并将其放置在菜单名称前面合适的位置。 将向下箭头图标放在菜单名称后面以指示折叠效果。
选择矩形、图标、向下箭头，单击【中间】按钮，将样式调整为居中对齐。
一级菜单完成。
3.二级菜单制作
同时选择一级菜单图标、矩形、向下箭头怎样用更加简单的方式实现三级折叠菜单的制作与使用，单击【工具栏】中的【组合】按钮，同时选择【交互->启动内部组件鼠标交互样式】。
完成组件组合后，单击鼠标右键，选择【转换为动态面板】，命名为“一级菜单1”。
双击“一级菜单1”动态面板。 此时，一级菜单就转换为动态面板。 单击复制状态按钮进行添加。
打开页面，修改页面一级菜单样式，选择向下箭头，调整向下箭头的【位置和大小】，旋转180°，箭头会向上出现，显示菜单展开效果。
用鼠标选择一级菜单样式，同时按住键盘上的【Ctrl】键。 复制样式下方的一级菜单样式，调整为左右对齐，删除图标和向下箭头（或根据自己需要调整样式），将菜单字改为“二级菜单1.1”。
右键单击鼠标，选择【交互样式】（注意：如果此时样式处于组合状态软件制作，请取消组合，否则不会显示交互样式按钮），设置菜单悬停和选择效果，悬停效果可以设置填充颜色、字体颜色，所选效果可以包括填充颜色、字体颜色、线段颜色、边框宽度、边框类型、边框可见性等样式。 点击【确定】完成二级菜单风格调整。
选择二级菜单，在“交互”页面进行如下操作：【新建交互->点击时->设置选中】，选择将当前组件设置为“True”，点击确定。
交互式编辑器窗口关闭后，按住键盘上的【Ctrl】键，复制所需数量的二级菜单，调整位置并更改为所需的菜单名称，完成二级菜单样式的创建。
4.设置菜单展开和折叠效果
切换到，选择一级菜单样式，在“交互”页面进行如下操作：【新建交互->点击时->设置面板状态】，选择并设置“一级菜单1为推送下方”并拉动组件”。
切换到，选择一级菜单样式，在“交互”页面进行与上述相同的操作：【新建交互->点击时->设置面板状态]，选择并设置“一级菜单1为下面”推和拉组件”。
这时我们检查菜单制作效果时可以发现，点击不同的二级菜单时会出现以下情况。
这时，我们可以选择三个二级菜单，单击鼠标右键，选择【选项组】，选择一个已有的组名或者输入一个新的组名。 现在，我们将组名填写为“二级菜单-互斥”，点击【确定】按钮即可完成编辑操作。
这时点击预览，我们可以看到点击不同的二级菜单并不会出现全选的效果。
5.设置菜单互斥效果
关闭动态面板，在首页选择“一级菜单1”动态面板，按住键盘上的【Ctrl】键，复制所需数量的一级菜单，并修改菜单名称及对应的动态面板名称依次为**级。 菜单2，一级菜单3。
双击“一级菜单1”动态面板，选择页面中的“一级菜单1”样式，移动鼠标设置面板状态，点击【添加目标】按钮继续设置面板状态，分别是“一级菜单2至推拉元件下方”、“一级菜单3至推拉元件下方”。
上述操作达到的效果是：一级菜单1展开，一级菜单2和一级菜单3的菜单缩小。
“一级菜单2”动态面板中的操作方法同上。 面板状态设置为“推拉元件下方一级菜单1”和“推拉元件下方一级菜单3”。
上述操作达到的效果是：一级菜单2展开，一级菜单1和一级菜单3的菜单缩小。
“一级菜单3”动态面板中的操作方法同上。 面板状态设置为“推拉元件下方一级菜单1”和“推拉元件下方一级菜单2”。
上述操作达到的效果是：一级菜单3展开，一级菜单1和一级菜单2的菜单缩小。
二级菜单效果完成，检查效果。
二级菜单的效果就制作完成了。 如果有任何疑问，请在评论区留言。 下一篇文章将更新《三级菜单的制作与使用》。
