Axure教程—菜单（中继器）

原创纤纤露 2023-06-05 14:51:47 评论(0) 阅读(197)

本文将教大家如何用AXURE中的中继器制作菜单（二级）,如果你想了解如何使用AXURE中的中继器来创建这种图形，建议你可以仔细阅读本文。

本文将教大家如何用AXURE中的中继器制作菜单（自动折叠其他菜单）
一、效果介绍
如图：
![](https://img.huzhan.com/blog/20230605/20231685947739601.png)
预览及下载地址：https://iuek50.axshare.com

二、功能介绍

点击菜单，展示其子菜单
自动折叠其他菜单
三、制作方法
（1）中继器
拖入一个中继器，为其赋值，如图：
![](https://img.huzhan.com/blog/20230605/20231685947772764.png)
（2）中继器内部
- 菜单
拖入一大一小矩形，其小矩形为文本标签，小标签命名为”菜单“，两个矩形组合一起，命名为组合1，在大矩形右边加入一个图片组件，其为箭头图片，三个组件组合一起命名为组合1，如图：
![](https://img.huzhan.com/blog/20230605/20231685947786616.png)

子菜单

拖入一大一小矩形，其小矩形为文本标签，小标签命名为”子菜单“，两个矩形组合一起，命名为组合2，
![](https://img.huzhan.com/blog/20230605/20231685947807729.png)

两个组合重叠一起（组合1在组合2上），如图：
![](https://img.huzhan.com/blog/20230605/20231685947817976.png)

最终设计，如图：
![](https://img.huzhan.com/blog/20230605/20231685947824906.png)

四、交互设置
(1)中继器
中继器载入和每项加载时设置，如图：
![](https://img.huzhan.com/blog/20230605/20231685947835260.png)

（2）中继器内部组合

组合1
鼠标点击时交互设置，如图：
![](https://img.huzhan.com/blog/20230605/20231685947844851.png)

组合2
鼠标点击时交互设置，如图：

![](https://img.huzhan.com/blog/20230605/20231685947858533.png)
设计中菜单样式和颜色可以自由修改。

关注下面的标签，发现更多相似文章本文TAG标签：

Axure教程—菜单（中继器）

已有 0 条评论

Ta的最新文章

标签大全

阅读目录