[Axure]Axure中展开和回收的多级菜单

在用axure制作仿真原型时，B/S结构的中后台设计中经常会有树形菜单的存在，制作一套高保真且方便修改的多级树形菜单模板十分的有必要。一方面针对菜单的展开、选中、滚轴等过程能够保真交互，另一方面可以快速的更改菜单的名称，以兼容更多的需要。

一、制作一个能够展开收回的多级菜单

制作一个简单的点击展开的菜单可以有多个方法，比如通过点击上层菜单后，进行动态面板切换、显示隐藏切换等，但是由于在正常的交互界面中，除了展开交互外，更为直观的交互还有其他菜单的下移，在高保真要求下，仅靠切换来实现的话，多个菜单的动态面板设计会变的异常复杂。

动态面板中的展开/收起功能

在设置动态面板切换时，可以使用展开/收起，并且设置展开/收起的方向，他表示的意思是：在切换动态面板时，根据动态面板各个状态大小的不同，调整其他的相关组件的位置和布局（对其下方的组件进行下移或收回，对其右侧的组件进行右移或收回）。

由于在默认情况下，一个动态面板各个状态下的大小是不变的，因此在设置动态面板时，需要选中调整大小以适合内容。

关于空组件动态面板的占位问题

在设置多级展开交互时，按照正常来说，可以设置二级菜单动态面板的第一个状态为空，也就是没有任何组件在该状态下，这样可以表示二级菜单收束的情况，但在Axure 9下有一个暂时无法解决的问题，即使没有任何组件的动态面板依旧会有一个10×10的方格大小作为定位，因此在一级菜单布局时，向下展开和收起所影响的范围必须安排在这个空的10×10方格下面。

但对于Axure9来说，这个10×10的方格不存在任何组件，在布局时组件间的间距和吸附提醒，并不有效，所以我通常会在初始的第一个空组件的状态里增加一条和菜单宽度相同，与底色颜色一致的横线，方便布局。

由于在编辑时通常会使用空状态作为动态面板的默认状态，因此在展开后会影响多宽的范围（多宽范围内的组件会下移）也很难确认，用与菜单展开后同宽的横线，在空状态中作为提示，也可以方便布局。

展开/收起所影响的范围限制

由于展开和收起功能，影响的是动态面板下方的所有组件，但是在实际过程中，底部的版权内容，或者菜单导航底部的logo是不希望影响到的，且不希望整个页面由于导航菜单的不断展开，而不断延长，希望整个页面在规定的高度下进行，则可以使用动态面板嵌套的方式来规避。

可以将所有的一级菜单限制在一个固定高度的动态面板里，这样即使展开了多个菜单，导致高度超出标准，也不会影响整体页面，及动态面板下方的组件。同时，可以打开动态面板的Scroll，在动态面版内容超出面板高度时，使用滚动条。

菜单的背景色问题

通常情况下，对于背景色，我们会拖拽一个指定大小的矩形置底，但是由于菜单的高度是动态变化的，那这个背景色就不能使用矩形置底，对一级菜单整合的动态面板进行底色填充即可。

滚动条问题

可以针对一级菜单的动态面板，打开滚动条，可以设置成按需，也可以设置成垂直。

要注意按需的情况，若内部的组件大小刚好与动态面板大小一致，他还是会视为需要滚动条的，为了避免这种情况，可以在选中所有一级菜单新建动态面板后，手动调整使动态面板略大一点。如下图所示，红框内为组件的大小，滚动条包围的区域为动态面板的大小，这种情况下，默认就不会看到滚动条，在展开菜单超出显示范围时才有。

由于Axure的滚动条很丑，网上有很多滚动条美化的教程，但还有一种解决思路，我们需要的是滚动的交互，而不是滚动条，我们可以在滚动条的上方，添加一个固定的颜色遮罩，把滚动条遮着即可，并不会影响滚动的操作。

菜单展开和收回的唯一标识

通常情况下，我们希望只有一个菜单被展开，当我展开一个一级菜单时，另外被展开的菜单应该收回。展开收回的逻辑可以如下方的编写方式，将所有的其他菜单都收回至空状态，切换当前点击的菜单的展开收回状态即可。注意，如果设置了展开收回的动画时间，一定要有足够的等待时间，确保动画完成，否则，展开收回的位置定位将会出错。

我们可以将一级菜单的文字部分设置选中状态为高亮，并将箭头朝下的展开SVG的选中状态为收回版本的图案，将文字和SVG组合，并针对组合设置选项组，将所有的一级菜单均归入该选项组，则可以通过选项组的设置，来确保一级菜单的高亮和展开SVG状态只有一个。（选项组代表，该组内仅能有一个被选中，但不代表必须有一个被选中）