Axure教程—中继器菜单

本文将教大家如何用AXURE中的中继器制作菜单(不自动折叠其他菜单)
一、效果
Axure教程—中继器菜单_第1张图片
预览地址:https://8ao8gl.axshare.com

二、功能
1、点击菜单出现相应的子菜单
2、子菜单如果想折叠,点击相应的菜单
三、制作
(1)中继器
拖入一个中继器,为其赋值,如图:
Axure教程—中继器菜单_第2张图片
2、中继器内部

  • 一级菜单
    拖入一个矩形组件,其大小为50×35,再其上拖入一矩形组件,其大小为50×20,并赋其文本为“文本标签”连个矩形组件组合并命名为1,字体颜色设置为#0000FF,鼠标悬停或选中字体颜色设置为#FEA213,如图:
    在这里插入图片描述
  • 二级菜单
    拖入一个矩形组件,其大小为50×35,再其上拖入一矩形组件,其大小为50×20,并赋其文本为“文本标签”连个矩形组件组合并命名为2,字体颜色设置为#0000FF,鼠标悬停或选中字体颜色设置为#FEA213,如图:
    在这里插入图片描述
    两个组合叠放一起(1上2下)

最终设计如图:
Axure教程—中继器菜单_第3张图片

四、交互
1、中继器
中继器载入时设置,如图:
在这里插入图片描述
每项加载时设置,如图:
Axure教程—中继器菜单_第4张图片

最终设置,如图:
Axure教程—中继器菜单_第5张图片
2、组合1(菜单)
组合1鼠标点击时,设置如图:
Axure教程—中继器菜单_第6张图片
3、组合2(子菜单)
鼠标点击时设置,如图:
Axure教程—中继器菜单_第7张图片

制作完毕。

你可能感兴趣的:(Axure,Axure原型设计,Axure高保真原型设计,axure,Axure中继器,中继器菜单,Axure中继器菜单)