编导：在制作动态菜单时，如果菜单组件较多，依赖axure自带的“推送组件”可能会造成错位。本文作者分享了使用动态面板和位移完成动态菜单制作的方法。感兴趣的朋友，一起来看看吧。
肯定有很多同事跟我一开始一样用“display-push the lower components”做动态菜单，但是当菜单组件很多的时候，依赖自带的“push components”用axure总是会出现错位的情况，我改了方案，用动态面板和位移来完成。
菜单是整个网站都需要的，只需要麻烦一次，其他时间直接找高手调用就可以了……废话不多说，跟着我搞定在公交车上！
Step 1 – 绘制基本组件
如图，首先准备菜单的组件，默认但不限于：颜色、线宽、圆角、投影...
p>
绘制组件的规则：尽量使用尽可能少的组件。如上，我直接把文字写在矩形里面，可以隐藏线段的可见性，更美观。
注意：我们要使用动态面板来制作，所以需要准备两种状态的组件。
第二步-设置交互风格
风格的设置包括初始风格和交互风格。一般PC端组件的可点击状态是鼠标悬停时颜色发生变化，所以我们就一次性准备好了。
注意：交互样式可以直接复制。
这时候就可以凸显出使用矩形组件的好处了。我们可以直接更改“鼠标传递”样式中的一些参数。在这里，我更改了填充颜色和文本颜色。
用同样的方法改变箭头的交互样式，用鼠标右键将矩形和箭头分组，选择：触发内部组件鼠标交互样式。
这样，只要鼠标移动到这个组中，鼠标悬停样式中既可以出现箭头，也可以出现矩形。
Step 3 – 设置动态面板
如下图，我们可以将准备好的两组组件（折叠/展开）放入一个动态面板中，分为两种状态，动态面板命名为：menu a。
第四步-设置交互效果
我们设置折叠一级菜单的命令：鼠标点击时-切换面板状态-本面板（菜单a）为状态 2（扩展）状态。
我们为展开的一级菜单设置命令：鼠标点击时-切换面板状态-本面板（菜单a）为状态1（关闭）状态。
Step 5 – 补充其他菜单
可以使用copy的方式补充剩余的一级菜单，但是要注意：菜单包含两种状态，而且菜单要名字都改了，千万不要错过。
第六步-设置移动区域
点击菜单会导致面板发生变化（当前菜单展开，其余菜单下移），那么我们需要展开下面的菜单以对它们进行分组和命名。比如“一级标题a”有二级菜单，其他的菜单需要下移，剩下的b/c/d组合在一起。
Step 7 – 设置移动距离
接下来我们进入“Level 1 Title a”面板，在折叠状态下添加命令： When clicked –移动 – 单击 a 向下移动 – 通过 (0.90)。
问题：为什么是0.90？
答：一级标题a下有3个二级菜单，每个组件的高度为30，菜单需要垂直移动，所以为0.90。
然后，在展开状态的菜单中添加命令：点击时-移动-点击一个下移-pass(0.-90)。
至此，菜单设置就结束了，一级标题b、c、d都是这样制作的。
关于如何设计菜单的介绍到此结束（菜单设计7步分析））。
文章来源于网络或者作者投稿，若有侵权请联系删除，作者：秋枫，如若转载，请注明出处：https://www.laoz.net/4946.html
