Axure做左侧二级导航切换效果

 时间:2026-02-14 21:04:32

1、首先随宙大家通过Axure的部件--矩形,建立如图所示的图样。(基础的我就不太细说了英没近)

底色图:灰色,w350/h500;

三个彩色的矩形:w300/h40;分别命名为1,2,3

无色的三个矩形:w300/h100;分别对应彩色的命名11,22,33

调整一个彩色的矩形对应一个白色的矩膨肥形,排版如图所示;

Axure做左侧二级导航切换效果

2、将11,22,33设置为隐藏状态,设置方法:

选择图形,在右侧的“部件属性和样式”,选择hidden(隐藏)。

Axure做左侧二级导航切换效果

3、调整位置,选择2和22两个矩形,向上移动,至1的下边缘和2的上边缘对齐。同样移动3和33,与2的最下边缘对齐,如图所示

Axure做左侧二级导航切换效果

1、选择蓝色的矩形(也就是1);在“部件交互和注释”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器

Axure做左侧二级导航切换效果

2、在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"11",可见性选择“切换”,并在”更多选项“中选择”展开部件“;

选择“22”,可见性选择“隐藏”,选中“收起部件”,其他默认;

选择“33”,可见性选择“隐藏”,选中“收起部件”,其他默认;

点击确认;设置完成后,如图所示

Axure做左侧二级导航切换效果

3、选择黄色矩形2,在“部件交互和注释”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器;

在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"22",可见性选择“切换”,并在”更多选项“中选择”展开部件“;

选择“11”,可见性选择“隐藏”,选中“收起部件”,其他默认;

选择“33”,可见性选择“隐藏”,选中“收起部件”,其他默认;

点击确认,设置完成后,如图所示

Axure做左侧二级导航切换效果

4、选择红色矩形3,在“部件交互和注释”-“鼠标单击时”,右键“新增用例”;弹出用例编辑器;

在用例编辑器,选择"部件“-切换;在最右侧“第四步 配置动作”,选中"33",可见性选择“切换”,并在”更多选项“中选择”展开部件“;

选择“11”,可见性选择“隐藏”,选中“收起部件”,其他默认;

选择“22”,可见性选择“隐藏”,选中“收起部件”,其他默认;

点击确认,设置完成后,如图所示

Axure做左侧二级导航切换效果

5、点击F5预览或者生产原型文件。建议用IE查阅。完成后如图,大家点击试试吧。

Axure做左侧二级导航切换效果

  • Axure怎么设置菜单栏悬停交互?
  • Axure RP 下拉列表 实现 城市和区 的交互
  • AxureRP设置元件隐藏教程
  • 如何利用Axure RP 8设计软件按钮控制单选按钮
  • Axure如何制作带提示信息的输入框
  • 热门搜索
    长寿湖旅游 湘西凤凰旅游 汕尾旅游景点大全 北京 旅游景点 福州旅游公司 国内旅游景点介绍 厦门工商旅游 广州从化旅游 清徐旅游 西安旅游社