编辑导语:制作动态菜单时，如果菜单元素较多，依靠axure提供的“推送元素”可能会出现错位。本文作者分享了利用动态面板和位移制作动态菜单的方法。有兴趣的朋友一起来看看吧。
想必也有很多同伴和我当初一样用“显示-推送下层组件”做动态菜单，但是当菜单组件很多的时候，依靠axure自带的“推送组件”总会出现错位的情况，所以我改变了方案，用动态面板和位移来完成。
整个网站都需要这个菜单。麻烦一次就好，剩下的可以直接从主板调用…事不宜迟，跟我上车吧！
步骤1–绘制基本元件如图，先准备好菜单组件。默认情况下，但不限于:颜色、线条粗细、圆角、投影…
绘制组件的规则:尽量少用组件。如上图，我直接把文字写在矩形里，可以把线段的可见性全部隐藏起来，让它更漂亮。
注意:我们需要使用动态面板来制作它，所以我们需要准备两种状态的组件。
步骤2–设置交互样式风格设置包括初始风格和交互风格。一般PC端组件的可点击状态是鼠标悬停，颜色变化，我们就一次性准备好了。
注意:交互样式可以直接复制。
这时，使用矩形构件的好处就可以凸显出来了。我们可以在“鼠标悬停”样式中直接更改一些参数。这里我改变填充颜色和文本颜色。
用同样的方法改变箭头的交互样式，用箭头分组矩形。点击鼠标右键，选择:触发内部组件的鼠标交互样式。
这样，只要鼠标移动到这个组中，箭头和矩形都可以出现鼠标悬停样式。
步骤3–如下图所示设置动态面板。我们可以把自己准备的两组组件(收起/展开)放到一个动态面板中，分成两种状态，命名为动态面板:MenuA..
第四步——设置互动效果。我们为一级菜单设置命令:当鼠标点击——切换面板状态——这个面板(菜单A)进入状态2(展开)状态。
我们为展开的一级菜单设置命令:当鼠标点击——切换面板状态——这个面板(菜单A)进入状态1(收起)状态。
第五步——补充其他菜单你可以通过复制的方式补充剩下的一级菜单，但是需要注意的是，菜单有两种状态，菜单名需要更改，不要遗漏。
步骤6–设置移动区域。点击菜单将导致面板改变(当前菜单展开，其他菜单下移)。然后我们将需要展开的菜单分组并命名。比如“一级标题A”有一个二级菜单，其他菜单需要下移，那么剩下的b/c/d就会归入大组。
第七步–设置移动距离接下来，我们进入“一级标题A”面板，在折叠状态下添加命令:点击–移动–点击A向下移动–pass(0.90)。
问题:为什么是0.90？
答:一级标题A下有三个二级菜单，每个组件的高度是30，所以菜单需要垂直移动，所以是0.90。
然后，在展开的菜单中添加一个命令:点击–移动–点击A向下移动–Pass(0。-90).
自此，菜单设置结束，而一级标题b,c,d都是这种制作方法。从此菜单设置结束，一级标题b、C、dC、D都是这样做的。
本文最初由@发布京京京京京京京京。大家都是产品经理，未经允许禁止转载。
题图来自Unsplash，基于CC0协议。
