完整版:Axure动态面板绘制动态菜单
在绘制原型的过程难免会用到动态导航菜单,下面是小编的制作方法~
步骤一:
放入一个动态面板,重命名为【动态导航菜单】
步骤二:
双击动态导航菜单,进入编辑状态,再添加一个动态面板,调节大小,并重命名为【模块一】
步骤三:
双击模块一,进入编辑状态,添加一个矩形,调节大小和【模块一】一样大,并重命名为【一级菜单】
步骤四:
把【模块一】下的state1重命名为【收起】,然后复制一个状态,重命名为【展开】
步骤五:
在【展开】面板中把一级菜单重命名为【一级菜单-展开】,然后添加几个二级菜单,编号为123
步骤六: 单击【收起】面板下的【一级菜单】,添加事件鼠标单击时--设置面板状态--选择模块一--展开--推动/拉动元件--选择线性
注:推动拉动元件的作用是当有多个模块时,某一个模块在收起展开时,其他模块元件能随之上下移动,不会被遮盖
步骤七:
同理,给【展开】面板下的【一级菜单-展开】设置收起的动作
步骤八:
此时预览你会发现,面板展开状态只显示出【一级菜单-展开】,并没有【二级菜单】;你只需要单击【模块一】,右键--选择自动调整为内容尺寸即可
步骤九:
如果你想增加用户体验,那么可以这样做:选中二级菜单,右键添加样式
在这里小编添加的是鼠标悬停和选中的样式
在这里把样式设置完成后,还需要右键设置选项组,作用是防止三个【二级菜单】同时出现选中的样式,随意命名1就好
步骤十:
我们还需要给【二级菜单】添加选中动作,单击【二级菜单1】,添加鼠标单击时--设置选中--选择【二级菜单1】;其他二级菜单操作同上
步骤十一:
此时,我们的模块一就已经制作完成啦,当然一个导航菜单肯定不止一个模块的,所以我们可以单击【模块一】复制几个并编号模块二、模块三......
步骤十二: 然后就大功告成啦!快去试一下吧
文\不懂西瓜