【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。,如下图:

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIP的OSPF综合实验

一、实验要求 1、R4为ISP,其上只能配置IP地址: R4与其他所有直连设备间使用公有 2、R3—R5/6/7为MGRE环境,R3为中心站点 3、整个OSPF环境IP地址为172.16.0.0/16 4、所有设备均可访问R4的环回 5、减少LSA的更新量,加快收敛,保障更…

《HeadFirst设计模式(第二版)》第七章代码——外观模式

代码文件目录: Subsystem: Amplifier package Chapter7_AdapterAndFacadePattern.FacadePattern.Subsystem;/*** Author 竹心* Date 2023/8/8**///扬声器 public class Amplifier {int volume 0;//音量public void on(){System.out.println("The amplifier …

NodeJs执行Linux脚本

(我们活着不能与草木同腐,不能醉生梦死,枉度人生,要有所作为。——方志敏) 为什么需要使用NodeJs执行Linux脚本 linux的sh脚本命令编写复杂,在不熟悉linux交互式命令的情况下,使用高级编程语言…

【论文研读】MARLlib 的架构分析

【论文研读】MARLlib: A Scalable Multi-agent Reinforcement Learning Library 和尚念经 多智能体强化学习框架研究。 多智能体强化学习库。 多智能体强化学习算法实现。 多智能体强化学习环境的统一化,标准化。 多智能体强化学习算法解析。 多智能体强化学习 算法…

Android 面试重点之Framework (Handler篇)

近期在网上看到不少Android 开发分享的面试经验,我发现基本每个面经中多多少少都有Framework 底层原理的影子。它也是Android 开发中最重要的一个部分,面试官一般会通过 Framework底层中的一些逻辑原理由浅入深进行提问,来评估应聘者的真实水…

小型双轮差速底盘机器人实现红外跟随功能

1. 功能说明 本文示例将实现R023样机小型双轮差速底盘跟随人移动的功能。在小型双轮差速底盘前方按下图所示安装3个 近红外传感器,制作一个红外线发射源,实现当红外发射源在机器人的检测范围内任意放置或移动时,机器人能追踪该发射源。 2. 电…

Teams Room视频会议室方案

需求背景: 适合在40平米的会议室参加Teams视频会议,会议桌周围可以坐20人,要求: 1,操作简单,一键入会Teams Room; 2,任何人带上自己的笔记本电脑,可以分享电脑画面&#…

Linux CEF(Chromium Embedded Framework)源码下载编译详细记录

Linux CEF(Chromium Embedded Framework)源码下载编译 背景 由于CEF默认的二进制分发包不支持音视频播放,需要自行编译源码,将ffmpeg开关打开才能支持。这里介绍的是Linux平台下的CEF源码下载编译过程。 前置条件 下载的过程非…

搭建Repo服务器

1 安装repo 参考&#xff1a;清华大学开源软件镜像站:Git Repo 镜像使用帮助 2 创建manifest仓库 2.1 创建仓库 git init --bare manifest.git2.2 创建default.xml文件 default.xml文件内容&#xff1a; <?xml version"1.0" encoding"UTF-8" ?…

MySQL语法2

DQL语句介绍 DQL是数据查询语言&#xff0c;用来查询数据库中表的记录 DQL-基本查询语句 SELECT 字段列表 FROM 表名列表 WHERE 条件列表 GROUP BY 分组字段列表 HAVIMG 分组后条件列表 ORDER BY 排列字段列表 LIMIT 分页参数 讲解过程&#xff1a;基本查询、条件查询…

博客网站添加复制转载提醒弹窗Html代码

网站如果是完全禁止右键&#xff08;复制、另存为等&#xff09;操作&#xff0c;对用户来说体验感会降低&#xff0c;但是又不希望自己的原创内容直接被copy&#xff0c;今天飞飞和你们分享几行复制转载提醒弹窗Html代码。 效果展示&#xff1a; 复制以下代码&#xff0c;将其…

c语言每日一练(4)

五道选择题 1、有以下代码&#xff0c;程序的输出结果是( ) #include <stdio.h> int main() {int a 0, b 0;for (a 1, b 1; a < 100; a){if (b > 20) break;//1if (b % 3 1)//2{b b 3;continue;}b b-5;//3}printf("%d\n", a);return 0; } A.1…

一站式印度跨境电商平台开发--多用户购物商城搭建

搭建一个一站式印度跨境电商平台开发&#xff0c;需要考虑以下几个方面&#xff1a;平台设计&#xff0c;技术架构&#xff0c;多用户购物商城搭建。 一、平台设计&#xff1a; 1. 市场调研&#xff1a;了解印度电商市场的特点和需求&#xff0c;确定目标用户群体。 2. 平台功…

【CSS3】CSS3 动画 ④ ( 使用动画制作地图热点图 )

文章目录 一、需求说明二、动画代码分析1、地图背景设置2、热点动画位置测量3、热点动画布局分析4、动画定义5、小圆点实现6、波纹效果盒子实现7、延迟动画设置 三、代码示例 一、需求说明 实现如下效果 , 在一张地图上 , 以某个位置为中心点 , 向四周发散 ; 核心 是实现 向四周…

【Java Web基础】mvn命令、Maven的安装与配置

本文极大程度上来自Maven安装(超详解)&#xff0c;但是担心安的过程中遇到什么不一样的问题&#xff0c;顺便加深印象&#xff0c;所以还是打算自己弄一篇。 目录 第一步&#xff1a;Download Maven第二步&#xff1a;解压与安装2.1 解压2.2 安装 第一步&#xff1a;Download …

Three.js纹理贴图

目录 Three.js入门 Three.js光源 Three.js阴影 Three.js纹理贴图 纹理是一种图像或图像数据&#xff0c;用于为物体的材质提供颜色、纹理、法线、位移等信息&#xff0c;从而实现更加逼真的渲染结果。 纹理可以应用于Three.js中的材质类型&#xff0c;如MeshBasicMaterial…

ClickHouse(九):Clickhouse表引擎 - Log系列表引擎

进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; &#x1f3e1;个人主页&#xff1a;含各种IT体系技术&#xff0c;IT贫道_Apache Doris,Kerberos安全认证,大数据OLAP体系技术栈-CSDN博客 &…

Clickhouse 数据存储

一、数据分区 数据是以分区目录的形式组织的&#xff0c;每个分区独立分开存储.这种形式&#xff0c;查询数据时&#xff0c;可以有效的跳过无用的数据文件。 1.1 数据分区的规则 分区键的取值&#xff0c;生成分区ID&#xff0c;分区根据ID决定。根据分区键的数据类型不同&am…

PoseiSwap 开启“Poseidon”池,治理体系或将全面开启

PoseiSwap曾在前不久分别以IDO、IEO的方式推出了POSE通证&#xff0c;但PoseiSwap DEX中并未向除Zepoch节点外的角色开放POSE资产的交易。而在前不久&#xff0c;PoseiSwap推出了全新的“Poseidon”池&#xff0c;该池将向所有用户开放&#xff0c;并允许用户自由的进行质押、交…