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

Axure设计多层级菜单下拉联动效果的方法

一、以Axure RP Pro V8.0.0.3333为例制作三级菜单下拉联动效果

1. 制作第三个一级菜单及其子菜单
   • 新建一个一级菜单，命名为第三个一级菜单，在其下方建立三个子菜单。
   • 选中这三个子菜单，将其转换为动态面板，并设置为隐藏状态。
   • 对第三个一级菜单添加点击事件，添加条件判断：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。同时可在事件内加动态效果，如向下显示、向上隐藏（时间暂定500ms）。
   • 将第三个一级菜单与其子菜单视作一个整体，设置为一个动态面板。
2. 制作第二个一级菜单及其子菜单
   • 按照制作第三个一级菜单与子菜单的原理与步骤制作第二个一级菜单及其子菜单，并且把之前做好的动态面板放在同一页面。
   • 对第二个一级菜单添加点击事件：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。此外，需多加一个效果，即移动第三个一级菜单的动态面板，移动距离以子菜单的高度*子菜单数量（例如子菜单高40，有三个子菜单，则对y坐标移动+/-120）。
   • 运行效果进行验证，如果效果正确，将刚刚所做的所有内容全选，并设置成一个动态面板。
3. 制作第一个一级菜单（如有需要，重复类似步骤）
   • 重复上述步骤来制作第一个一级菜单，注意相应的层级关系调整和动态面板的移动设置等操作。
   • 调整各个面板的位置，统一对齐后，即可完成三级菜单下拉显示的效果。

二、Axure 7.0RP创建三级级联下拉菜单（以省份、市、县为例）

1. 设置下拉菜单及初始数据
   • 设置三个下拉菜单分别代表省份、市、县。
   • 在省份下拉菜单（如命名为comProvince）中添加数据。
2. 制作二级和三级菜单的动态面板及填充数据
   • 以省份为黑龙江省为例，在代表市的下拉框（如命名为panelCity）中添加动态面板，动态面板名字为该省的名字，然后在动态面板中添加下拉框，下拉框中的列表项为该省下的城市（有多少个省份就需要添加多少个动态面板）。
   • 以同样的方法进行县（区域）的添加。
3. 添加交互效果
   • 选择省份下拉菜单（comProvince）控件进行设置，选择当选项改变时，显示对应的市级信息。
   • 按照同样的方法添加市级下的区域信息（在动态面板里的状态信息中的下拉框中设置）。

三、Axure 9实现多层下拉框联动（以省市区三级为例）

1. 设置下拉框及初始数据
   • 在新建的页面中添加三个下拉框，第一个正常显示的下拉框（如命名为comProvince选择省份），后面两个下拉框（如命名为panelCity和panelArea）要转换为动态面板。
   • 在省份下拉框中添加一些数据。
2. 制作动态面板及填充数据
   • 以某省份为例，在对应的代表市的动态面板（panelCity）中，根据省份数量添加对应数量的动态面板状态，每个状态中的下拉框填充该省下的城市数据。
   • 同理制作区域（县）的动态面板（panelArea）及填充数据。
3. 设置交互效果
   • 选择省份下拉框（comProvince），新建交互，选择事件为“选项改变时”，设置当选择某省份时，对应的市菜单切换为该省状态。
   • 以同样的方法设置当城市菜单选择某城市时，区县菜单切换为该城市的区县。