遇到菜单元件较多时靠着axure自带的“推动元件”总是会出现错位的情况，所以，我便改了方案采用动态面板和位移的方式来完成。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
菜单是整个网站都需要用到的，只用麻烦一次，其余时候直接从母版调用即可……废话不多说，跟着我上车！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤1–绘制基本元件
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
如图所示，先把菜单的元件准备好，默认但不限于：颜色、线条粗细、圆角、投影……文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
绘制元件规则：尽量采用较少的元件，如上图，我是直接在矩形内写的文字，并且可以将线段可见性全部隐藏让他更加美观。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
注意：我们要采用动态面板来制作，所以要准备两种状态下的元件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤2–设置交互样式
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
而样式的设置包括初始样式和交互样式，一般PC端的元件可点击状态都是鼠标悬停出现颜色变化，所以我们一次性准备好。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
注意：交互样式可以直接复制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
在这时候用矩形元件的好处就可以凸显出来了，我们可以直接在“鼠标经过”样式中改变一些参数，这里我改变的是填充色和文字颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
用相同的方法改变箭头的交互样式，并且将矩形与箭头进行打组鼠标右击，选中：触发内部元件鼠标交互样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
这样一来，只要鼠标移入此组，则箭头与矩形都可以出现鼠标悬停样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤3–设置动态面板
如下图所示，可以将我们准备好的两组元件（收起/展开）放入一个动态面板里面，分成两个状态,将动态面板命名：菜单a。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤4–设置交互效果
我们对收起的一级菜单进行命令设置：鼠标点击时-切换面板状态-此面板（菜单a）到state 2 （展开）状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
我们对展开的一级菜单进行命令设置：鼠标点击时-切换面板状态-此面板（菜单a）到state 1 （收起）状态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤5–补充其他菜单
可以使用复制的方法补充其余的一级菜单，但是要注意：菜单内包含两种状态，需要将菜单名称都做更换，切莫遗漏。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤6–设置移动区域
点击菜单会导致面板变化（当前菜单展开，其余菜单下移）那么我们将需要展开下的菜单进行打组，且命名。比如，“一级标题 a” 有二级菜单，其他菜单需要下移，则将剩下的 b/c/d 进行大组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
步骤7–设置移动距离
接下来，我们进入“一级标题a” 的面板，在收起状态下添加命令：点击时–移动–点击a 下移–经过（0.90）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
疑问：为什么是0.90？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
答：一级标题 a 下有3个二级菜单，且每个元件高度30 而菜单需要垂直移动，所以是0.90。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
然后，在展开状态下的菜单处添加命令：点击时–移动–点击a 下移–经过（0.-90）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
自此，菜单设置结束，而一级标题b,c,d都是这种制作方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html
来源：败家女文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/36769.html