Axure-动态面板制作下拉菜单

时间:2024-03-13 07:34:30
      动态面板是Axure RP 8中的一款高级组件,在隐藏与显示、滑动效果 、拖动效果、多状态效果切换等操作的场景中,动态面板是你的不二选择。
	下面为大家演示的是使用动态面板制作下拉菜单;

1.从部件库拉四个动态面板到操作区组合在一起;
Axure-动态面板制作下拉菜单

  1. 双击选中动态面板,命名面板名称并且添加两个状态,分别命名为“状态1”与“状态2”.
    Axure-动态面板制作下拉菜单

  2. 双击“状态1”,添加矩形并且命名为目录一
    Axure-动态面板制作下拉菜单

  3. 双击“状态2”编辑其状态
    Axure-动态面板制作下拉菜单

  4. 复制状态1的矩形并且添加三个矩形作为子目录,并且分别命名为“子目录1,2 , 3”。
    Axure-动态面板制作下拉菜单

  5. 回到Home页,目录已经被编辑好。
    Axure-动态面板制作下拉菜单

  6. 按照编辑动态面板1的步骤把下面三个面板依次命名,接下来为目录一添加用例。
    Axure-动态面板制作下拉菜单

  7. 按照图中操作依次实现的效果为:单击目录一时会由状态1变展开成状态2。
    Axure-动态面板制作下拉菜单

  8. 回到Home,则目录一的用例1已近建立完毕,选择更多事件,选择更多事件,注意选择动态面板调整大小以适应内容。
    Axure-动态面板制作下拉菜单

  9. 选择鼠标移出时,为实现收起效果。
    Axure-动态面板制作下拉菜单

  10. 按照图中操作依次实现的效果为:鼠标移开目录一时,会由状态2变展开成状态1。
    Axure-动态面板制作下拉菜单

  11. 目录一的下拉与收起用例都已近创建完毕。
    Axure-动态面板制作下拉菜单

  12. 按照目录一的方法创建目录二的下拉和收起用例,并且添加目录二的状态2.
    Axure-动态面板制作下拉菜单

14.目录三和目录四的状态2也需要有相应的内容(页面填充,如果没有,那么在自适应内容的时候,会变为消失状态),相关操作流程和目录一一样。
15. 点击右上角预览,单机目录一,子目录展现,移开鼠标子目录收回。