Axure8.0 制作左侧动态菜单栏

在网上查了好多方法,感觉都比较繁琐,而且版本不同制作方法也有差别,偶然间找到了一个简单的制作方法,不知道正确与否,如有错误,请指正。

------------------------------------------------------分割线--------------------------------------------------------------------

1、如下图所示,用矩形做成一个菜单栏样式,且菜单一、菜单二、菜单三的名称分别设置为RA、RB、RC。

Axure8.0 制作左侧动态菜单栏_第1张图片

2、同时选中子菜单1、子菜单2、子菜单3,点击右键,并选择“转换为动态面板”选项,将其转换为动态面板,并将其名字命名为P1,剩余子菜单同理,分别命名为P2、P3。

Axure8.0 制作左侧动态菜单栏_第2张图片Axure8.0 制作左侧动态菜单栏_第3张图片

3、选择RA为其添加鼠标单击时的用例,选择“切换可见性”,配置动作为P1, 重!点!来!了!要勾选下方的“推动/拉动元件”这一步是关键点。(当然,可以为切换时添加动画)同样的,为RB、RC做同样的设置,只是配置动作改为P2、P3。

Axure8.0 制作左侧动态菜单栏_第4张图片

Axure8.0 制作左侧动态菜单栏_第5张图片

4、这样就可以预览了,我为了方便看,把菜单栏加了颜色,颜色是随便选择,将就着看吧!

Axure8.0 制作左侧动态菜单栏_第6张图片Axure8.0 制作左侧动态菜单栏_第7张图片

 

 

5、如果你想最开始出来的是三个菜单,子菜单全部隐藏的话,只需要将RA、RB、RC挨着放在一起,在放置P1、P2、P3的时候,将这三个挨着他们的母菜单放在一起,就像下图这样:(但是需要注意,这个时候需要将三个子菜单(也就是三个动态面板)隐藏,这样在预览时才正确)。

Axure8.0 制作左侧动态菜单栏_第8张图片

这个时候就可以预览一下了!

 

----------------------------------------------------------------------------------

一个产品小白,偶尔发现的方法,如有错误,请多多指教!

你可能感兴趣的:(Axure,产品)