Axure9.0教程：⼆级菜单的制作与使⽤⼈⼈都是产品经理编辑导语：⼆级菜单是常见的操作样式，为避免紧急情况下不知如何操作，也许你需要了解⼀下⼆级菜单的制作过程。那么，如何利⽤Axure来制作⼆级菜单？本篇⽂章⾥，作者便结合Axure梳理了⼀份⼆级菜单Axure制作和使⽤教程，⼀起来看⼀下。前段时间跟甲⽅领导⼀块去开会，当时主要是因为有个项⽬⽐较着急，需要现场修改原型，修改过程中需要⽤到三级折叠菜单，当时怎么也整不出来，最后把⼆级菜单的样式修改了⼀下，虽然蒙混过关，但是真的觉得特别尴尬。会议结束后，我就紧急研究了⼀下怎样⽤更加简单的⽅式实现三级折叠菜单的制作与使⽤，过程中我们先将⼆级菜单的制作过程展⽰出来。话不多说，先上效果图（看着有些单调，如果想要其他效果，欢迎催更~）。接下来，我们说⼀下制作⽅法。⼀、⽤到的元件Axure 9.0元件库中的矩形、阿⾥巴巴⽮量图标库中搜索的⼀级菜单图标及向下箭头。⼆、⼀级菜单制作使⽤⿏标将Axure9.0⾃带元件库中的矩形拖拽⾄页⾯固定位置，【“样式”页⾯/⼯具栏】设置矩形⼤⼩、边框、填充颜⾊。【“样式”页⾯/⼯具栏】设置菜单名称的字体⼤⼩、颜⾊，【功能区->样式】设置内容与矩形的边距。选中矩形，点击⿏标右键，选择【交互样式】，设置菜单名称⿏标悬停样式中的字⾊，点击【确定】。将从【阿⾥巴巴⽮量图标库】中搜索的⼀级菜单图标调整好颜⾊和⼤⼩，放在菜单名称前⾯合适的位置，将向下箭头图标放在菜单名称的后⾯，表⽰折叠效果。选择矩形、图标、向下箭头，点击【中部】按钮，调整样式⾄中部对齐。⼀级菜单制作完成。三、⼆级菜单制作同时选中⼀级菜单图标、矩形、向下箭头，点击【⼯具栏】中的【组合】按钮，同时，选择【交互->出发内部元件⿏标交互样式】。完成组件之间的组合后，单击⿏标右键选择【转换为动态⾯板】，命名为“⼀级菜单1”。双击“⼀级菜单1”动态⾯板，此时⼀级菜单转化为动态⾯板中的state1，点击后⾯的复制状态按钮新增state2。打开state2页⾯，修改state2页⾯⼀级菜单样式，选择向下箭头，调整向下箭头【位置与尺⼨】，旋转180°，箭头向上显⽰为菜单展开效果。⿏标选中⼀级菜单样式，同时按住键盘中的【Ctrl】键，将⼀级菜单样式复制⼀份到该样式下⽅，调整⾄左右对齐，删除图标及向下箭头（或根据需求⾃⾏调整样式），修改菜单字样为“⼆级菜单1.1”。点击⿏标右键选择【交互样式】（注意：此时如果样式为组合状态，请取消组合，否则否见不显⽰交互样式按钮），设置菜单悬停和选中效果，悬停效果可设置填充颜⾊、字⾊，选中效果可包括填充颜⾊、字⾊、线段颜⾊、边框宽度、边框类型、边框可见性等样式，点击【确定】，完成⼆级菜单样式调整。选择⼆级菜单，在“交互”页⾯依次执⾏以下操作：【新建交互->单击时->设置选中】，选择设置当前元件为“真”，点击确定。交互编辑器窗⼝关闭后，按住键盘中的【Ctrl】键，复制出所需的⼆级菜单个数，调整位置并修改成所需的菜单名称，完成⼆级菜单样式的制作。四、设置菜单展开与折叠效果切换⾄state1，选中⼀级菜单样式，在 “交互”页⾯依次执⾏以下操作：【新建交互->单击时->设置⾯板状态】，选择设置“⼀级菜单1到state2 推动和拉动元件 下⽅”。切换⾄state2，选中⼀级菜单样式，在“交互”页⾯依次执⾏上述相同操作：【新建交互->单击时->设置⾯板状态】，选择设置“⼀级菜单1到state1 推动和拉动元件 下⽅”。此时，我们查看菜单制作效果，可以发现：点击不同的⼆级菜单会出现以下情况。此时，我们可以选择三项⼆级菜单，点击⿏标右键，选择【选项组】，选择已有的组名称或输⼊新的组名称，现在，我们填写组名称为“⼆级菜单-互斥”，点击【确定】按钮，完成编辑操作。此时点击预览，我们可以看到点击不同的⼆级菜单，不会出现全部选中的效果。五、设置菜单互斥效果关闭动态⾯板，选择⾸页⾯“⼀级菜单1”动态⾯板，按住键盘中的【Ctrl】键，复制出所需的⼀级菜单个数，并依次修改菜单名称和对应动态⾯板名称为⼀级菜单2、⼀级菜单3。双击“⼀级菜单1”动态⾯板，在state1页⾯选择“⼀级菜单1”样式，⿏标移⼊到设置⾯板状态处，点击【添加⽬标】按钮继续设置⾯板状态，分别为“⼀级菜单2到state1 推动和拉动元件 下⽅”、“⼀级菜单3到state1 推动和拉动元件 下⽅”。以上操作实现的效果为：展开⼀级菜单1，则⼀级菜单2、⼀级菜单3的菜单收缩。“⼀级菜单2”动态⾯板中state1的操作⽅式同上，设置⾯板状态分别为“⼀级菜单1到state1 推动和拉动元件 下⽅”、“⼀级菜单3到state1 推动和拉动元件 下⽅”。以上操作实现的效果为：展开⼀级菜单2，则⼀级菜单1、⼀级菜单3的菜单收缩。“⼀级菜单3”动态⾯板中state1的操作⽅式同上，设置⾯板状态分别为“⼀级菜单1到state1 推动和拉动元件 下⽅”、“⼀级菜单2到state1 推动和拉动元件 下⽅”。以上操作实现的效果为：展开⼀级菜单3，则⼀级菜单1、⼀级菜单2的菜单收缩。⼆级菜单效果制作完成，查看效果。⼆级菜单的效果制作完成了，有什么问题欢迎⼤家在评论区留⾔，下篇给⼤家更新《三级菜单的制作和使⽤》。
本⽂由 @⽆澜 原创发布于⼈⼈都是产品经理。
