Axure怎么设计多层级菜单下拉联动效果?

菜单的下拉联动多种多样,多办公软件来说,菜单往往有多个层级,可以下拉联动,通过下拉来显示出子菜单,同时还可以移动其他未展开或已展开的菜单。下面由我来为大家讲解一下我的实现思路,其实非常像做千层饼,而且我是从最内层开始做的。

1、以三个一级菜单为例,我们可以直接先做第三个一级菜单,新建一个一级菜单,起名为第三个一级菜单,同时在它下方建立好三个子菜单,建好后将子菜单全选中后转换为动态面板,并设置隐藏。

2、菜单的联动效果一般是通过点击来触发的,所以,此时对第三个一级菜单添加点击事件,此时需注意:因为点击时可能触发两个动作,所以点击事件需要添加条件进行判断,如:当子菜单面板是隐藏的时候,点击后可显示子菜单;当子菜单是显示的时候,点击后可隐藏子菜单。同时可在事件内加动态效果,如向下显示、向上隐藏,时间暂定500ms;

3、此时第最后一个一级菜单设置完成了,但因为前面的一级菜单需要通过点击,显示其下方的子菜单,同时使第三个一级菜单与其下属子菜单向下移动,所以,我们需要将第三个一级菜单与其子菜单视作一个整体,使他们一同移动,所以,此时需将其设置为一个动态面板;

4、下面我们来做第二个一级菜单,同样的制作原理与步骤与第三个一级菜单与子菜单一致,但需要把刚刚做好的动态面板一并放置在同一页面,以便后续操作;

5、此时对第二个一级菜单做点击事件的添加:当子菜单面板是隐藏的时候,点击后可显示子菜单;当子菜单是显示的时候,点击后可隐藏子菜单。但与前一个一级菜单相比,需多加一个效果,即移动第三个一级菜单的动态面板,移动距离以子菜单的高度*子菜单数量,比如我例子中用的是三个高40的子菜单,则需分别对y坐标移动+/-120;

6、此时可以适当运行一下效果,验证做法是否有误,效果如图,效果正确后,将刚刚所做的所有内容全选,并设置成一个动态面板

7、此时重复第四五步骤,事件添加后发布尝试,可看到效果如图;此时多个菜单面板层层独立,均可通过点击实现下拉显示与收起,且处于其下方的菜单,也会跟着移动,不对有错误的效果出现。

8、最后,调整各个面板的位置,统一对齐后,效果如图,此时就完成了三级菜单下拉显示的效果了

(0)

相关推荐

  • 如何利用Axure RP 8设计软件按钮控制下拉框选项

    一般情况下,下拉框是有多个选项构成的,可以单选也可以多选:按钮是可以触发事件,操作其他元件发生变化,如单选按钮禁用启用.图片元件的显示和隐藏等.下面利用一个实例说明按钮控制下拉框选项,操作如下: 操作 ...

  • excel表格如何设置下拉菜单/下拉选项

    在运用excel中,给表格设置下拉菜单可以有效的提高我们的工作效率,大大减少我们的打字时间.设置好下拉表格,只需要选择点击,就好. 那么,如何设置excel表格的下拉菜单或者下拉选项呢? 设置下拉菜单 ...

  • AXURE RP 8怎么设置下拉菜单? AXURE下拉菜单的制作方法

    axure中想要制作下拉菜单,该怎么制作呢?下面我们就来看看详细的教程. 先看效果 1.先把自定义的下拉菜单样式设计好,注意组件结构 2.批量编辑子选项按钮的悬停,点击和选中的样式 1)批量选中所有按 ...

  • Word下拉菜单怎么设计? Word制作下拉菜单的教程

    Word中可以制作下拉菜单,该怎么设计下拉菜单呢?下面我们就来看看详细的教程. 1.打开Word,选择开发工具按钮 2.选择其中的下拉菜单按钮 3.即可在对应位置插入控件 4.选中控件,选择属性按钮 ...

  • Axure中怎么为网站制作联动下拉菜单?

    当我们在注册新用户,或者在使用某些工具软件的时候,会遇到当你从一个下拉菜单中选择一项,后面的下拉菜单会跟着变化的情况.此篇就向大家介绍一下如何实现此类功能. 1.打开你的Axure,创建一个空白的RP ...

  • 设计语言 – 下拉菜单/导航菜单

    一个看似简单的下拉菜单/导航菜单,背后会有多少隐藏的逻辑呢? 今天就讲一下如何绘制下拉菜单和导航菜单.不管是下拉菜单还是导航菜单,都是设计语言部分中的基础部分中的某个组成部分.当这些组件按照功能和需求 ...

  • 下拉菜单设计指南

    下拉菜单的使用 下拉菜单在网页设计中显然占有一席之地.然而,他们的过度使用和误用造成了许多可用性问题和混乱.设计师们为了各种不同的目的而使用下拉,包括: 命令菜单,它根据所选选项启动一个操作 当用户单 ...

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

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

  • WPS表格怎么添加二级下拉菜单? WPS表格添加下拉菜单的教程

    wps中想要设计一个二级下拉菜单,该怎么制作二级下拉菜单呢?下面我们就来看看详细的教程. 1.首先,点击打开表格文件,输入需要设置为下拉列表的各项文字.选择菜单栏的公式,在属性栏点击 指定 按钮 2. ...