Axure动态面板怎么制作三级菜单?

Axure中想要设计一款三级菜单,该怎么设计呢?下面我们就来看看详细的教程。

1、我们先放入菜单的相关元件,这里我使用的是矩形。

2、我们把三级菜单的三个元件全选,在上面点击鼠标右键,选择【转换为动态面板】的选项。

3、把这个新出现的动态面板命名为“3”;并且,再次点击鼠标右键或者在快捷功能区中,把这个动态面板【设为隐藏】。

4、二级菜单元件的【鼠标单击时】添加用例,设置动作为【切换可见性】,勾选目标元件“3”,并且勾选设置中的【推动/拉动元件】。

5、我们把二级菜单和三级菜单全选,同样点击鼠标右键,选择【转换为动态面板】的选项。

6、然后,把这个新出现的动态面板命名为“4”。ps:如果是拖入的动态面板尺寸是固定的,需要在属性中勾选【自动调整为内容尺寸】的选项。

7、双击动态面板“4”,再双击第一个状态“State1”,继续为二级菜单元件的【鼠标单击时】添加动作。我们先添加【隐藏】外层动态面板“4”的动作,并且勾选【拉动元件】的选项。

8、继续为二级菜单元件的【鼠标单击时】添加第3个动作,也就是上面提到的【显示】外层动态面板“4”,同时,在【更多选项】中选择【推动元件】的选项。

9、把做好的二级菜单和三级菜单一起选中,根据需求复制几份摆放好。

ps:复制时,不要单独复制二级菜单和三级菜单,必须二级菜单和三级菜单一起复制,这样交互的对应关系才会继续有效。

10、为一级菜单添加【鼠标单击时】的用例,设置动作【切换可见性】,勾选动态面板“4”,同时在设置中勾选【推动/拉动元件】。添加了这个交互之后,点击一级菜单时,就能点一下显示二级菜单,再点一下隐藏二级菜单。

11、点击一级菜单的时候,三级菜单默认是收起的状态。继续为一级菜单元件添加【鼠标单击时】的交互,设置动作【隐藏】所有的三级菜单所在的动态面板“3”,并且在隐藏的设置中都要勾选【拉动元件】的选项。

以上就是Axure设计三级菜单的方法,,希望大家喜欢,请继续关注我们。

(0)

相关推荐

  • axure动态面板怎么用?

    axure动态面板怎么用? 1.在制作好的页面上添加一个 hot spot 区域,然后拖动一个"动态面板"到"hot spot"上,右键将"动态面板& ...

  • Axure动态面板两种创建方法有什么区别?

    Axure动态面板有两种创建方法,这两种方法有什么区别呢?下面我们就来详细介绍一下. 第一种创建方法: 1.元件库中有单独的动态面板元件,可以拖出来直接用,也是常用方法: 2.效果是这种,空的动态面板 ...

  • axure动态面板怎么用? Axure动态面板制作页面弹出层的教程

    在快速原型制作中,我们通常会使用到Axure软件,有一些地方我会想要达到在页面做出弹出层的效果,这个时候为了快速达到效果,在Axure中,我们会用到动态面板:下面我就自己在这方面遇到的困难和效果介绍一 ...

  • Axure 用动态面板实现下拉菜单

    本讲解如何通过axure中的矩形+动态模板联合展示下拉菜单 操作方法 01 新增9个宽200高50的矩形,如例图排开 02 对附菜单,新增选中样式,如改变背景色,同时设置事件:鼠标移入设置当前部件为选 ...

  • axure动态面板怎么设置显示与隐藏?

    axure设置动态面板,使得我们的原型界面交互性能更强,以达到我们的业务需求,更能展示业务需求的形象性. 1.打开axure工具,如下图所示 2.从左侧元件库中拖拽动态面板组件 3.调出位置和大小面板 ...

  • axure怎么使用动态面板制作淘宝图片轮播效果?

    淘宝中经常可以看到店铺中的图片轮播效果,本经验将通过axure7.0实现. 1.下载需要轮播的图片 2.将图片引入至axure中,将引入的第一张图片转为动态面板 3.将动态面板添加四个状态,分别为状态 ...

  • Axure怎么使用动态面板制作banner图片轮播?

    Axure就不多介绍了,一般对产品岗位比较了解的都知道,常用的原型工具.这里为大家做一个用动态面板做简单的banner图片轮播的方法. 一.基础准备工作 1.打开Axure,页面名称命名为“图片轮播” ...

  • axure怎么使用动态面板制作转盘抽奖?

    目前各个网站,经常可以看到大转盘抽奖,本经验初步讲解大转盘抽奖的前提条件:让转盘转起来. 1.首先百度一张转盘图片,将改图片引入至axure中 2.将该转盘转为动态面板 3.将该动态面板分为12个状态 ...

  • axure怎么制作动态面板的拖动的原型?

    在高仿原型中,经常看到高仿原型,模仿微信,微博的对话框,在这里我做一个简单的例子来讲解下如通过动态面板的拖动实现想要的效果的 1.在页面添加动态面板,并在该动态面板中添加图片,以作区分 2.再页面1中 ...