【Axure动态面板】利用动态面板实现树形菜单的制作

利用动态面板,简单制作高保真的树形菜单。

、先看效果

       https://1poppu.axshare.com

二、实现思路

1、菜单无非就是收缩和展开,动态面板有个非常好的属性:fit to content,这个属性的含义是:面板的大小可以根据内容多少而变化;

2、菜单的收缩和展开,可以通过切换面板的状态来实现即可,即每个菜单设置两个状态:收缩和展开两个状态;

3、再利用面板状态切换时,对某个菜单下面的组件进行推或者拉的功能,实现移动其他菜单的位置。

三、需要的元件

1、一个菜单的容器面板(Panel)

2、若干个菜单面板,一个菜单就一个子面板,凡在容器面板中;

3、每个菜单都放一个Box组件,即线框,否则没办法实现菜单的鼠标移入的动态效果

4、每个菜单面板设置两个状态:收缩状态就是菜单名(一级),展开状态就是菜单名和这个一级菜单下的字菜单。

如下图:

、交互的添加

1、一级菜单的Box组件,设置MouseOver Style的属性,如下图:

2子菜单的Box组件,是这MouseOver Style的属性和Selected Style,并且SelectGroup设置同一个值,如“子菜单”等,如下图:

3、菜单的Panel添加Click Or Tab交互,如下图:

上图中,箭头标识出的一定要“勾选”上,否则没有菜单的效果。

4、子菜单的Box组件添加Click Or Tab交互,这里只实现了选中状态,可以添加点击时,打开某一个页面,Open link。,如下图:

每个一子菜单都需要填写。

按照以上步骤,即可实现高保真的菜单效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/59667.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java课题笔记~ 使用 Spring 的事务注解管理事务(掌握)

通过Transactional 注解方式,可将事务织入到相应 public 方法中,实现事务管理。 Transactional 的所有可选属性如下所示: propagation:用于设置事务传播属性。该属性类型为 Propagation 枚举, 默认值为 Propagation.R…

2. 软件需求 面向对象分析

目录 1. 软件需求 1.1 需求分类 1.2 需求获取 1.3 需求分析 2. 面向对象分析(OOA) 2.1 统一建模语言 UML 2.2 用例模型 2.2.1 用例图的元素 2.2.2 识别参与者 2.2.3 合并需求获得用例 2.2.4 细化用例描述 2.3 分析模型 2.3.1 定义概念类 …

【MySQL系列】表约束的学习

「前言」文章内容大致是MySQL的表的约束。 「归属专栏」MySQL 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、MySQL表的约束1.1 空属性1.2 默认值(default)1.3 列描述(comment)1.4 zerofill1.5 主键(primary ke…

element+vue 之动态form

1.页面部分 <div v-for"(item,index) in formList" :key"index"><el-col :span"6" v-if"item.inputType0"><el-form-item :label"item.conditionName" :prop"item.conditionCode":rules"{req…

我的2048创作纪念日

目录 一、来龙去脉二、2048天前的今天三、2048天的收获四、2048天后的今天五、祝福 一、来龙去脉 今天是 2023 年 8 月 9 日&#xff0c;在咖啡馆浏览我的 CSDN 主页时&#xff0c;看到官方发来了一则私信&#xff1a; 二、2048天前的今天 提示&#xff1a;可以和大家分享最初…

使用docker 搭建nginx + tomcat 集群

创建3个Tomcat容器&#xff0c;端口分别映射到 8080,8081,8082&#xff0c;使用数据卷挂载&#xff0c;分别将宿主机目录下的 /opt/module/docker/tomcat3/ROOT1/&#xff0c;/opt/module/docker/tomcat3/ROOT2/&#xff0c;/opt/module/docker/tomcat3/ROOT2/ 挂载到 容器内部…

Java从入门到精通(四)· 面向对象

Java从入门到精通&#xff08;四&#xff09; 面向对象 一 静态关键字&#xff08;static&#xff09; static表示静态关键字&#xff0c;可以用来修饰成员变量和成员方法。 被 static修饰的成员变量&#xff0c;称之为静态成员变量或者类变量&#xff0c;同理可得&#xff…

【个人记录】CentOS7 编译安装最新版本Git

说明 使用yum install git安装的git版本是1.8&#xff0c;并不是最新版本&#xff0c;使用gitlab-runner托管时候会拉项目失败&#xff0c;这里使用编译源码方式安装最新版本的git。 基础环境安装 echo "nameserver 8.8.8.8" >> /etc/resolv.conf curl -o /…

ArmSoM-W3之RK3588安装Qt+opencv+采集摄像头画面

1. 简介 场景&#xff1a;在RK3588上做qt开发工作 RK3588安装Qtopencv采集摄像头画面 2. 环境介绍 这里使用了OpenCV所带的库函数捕获摄像头的视频图像。 硬件环境&#xff1a; ArmSoM-RK3588开发板、&#xff08;MIPI-DSI&#xff09;摄像头 软件版本&#xff1a; OS&…

MYSQL进阶-事务的基础知识

1.什么是数据库事务&#xff1f; 就是把好几个sql语句打包成一个整体执行&#xff0c;要么全部成功&#xff0c;要么全部失败&#xff01;&#xff01;&#xff01; 事务是一个不可分割的数据库操作序列&#xff0c;也是数据库并发控制的基本单位&#xff0c;其执 行的结果必…

IOS上架流程

IOS上架流程 准备 开发者账号完工的项目 上架步骤 一、创建App ID二、创建证书请求文件 &#xff08;CSR文件&#xff09;三、创建发布证书 &#xff08;CER&#xff09;四、创建Provisioning Profiles配置文件 &#xff08;PP文件&#xff09;五、在App Store创建应用六、…

04-1_Qt 5.9 C++开发指南_常用界面设计组件_字符串QString

本章主要介绍Qt中的常用界面设计组件&#xff0c;因为更多的是涉及如何使用&#xff0c;因此会强调使用&#xff0c;也就是更多针对实例&#xff0c;而对于一些细节问题&#xff0c;需要参考《Qt5.9 c开发指南》进行学习。 文章目录 1. 字符串与普通转换、进制转换1.1 可视化U…