当前位置: 首页 > news >正文

【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.lryc.cn/news/116341.html

相关文章:

  • Android 实现 RecyclerView下拉刷新,SwipeRefreshLayout上拉加载
  • 使用MethodInterceptor和ResponseBodyAdvice做分页处理
  • WEB集群——LVS-DR 群集、nginx负载均衡
  • 倒计时87天!软考初级信息处理技术员2023下半年报名考试攻略
  • 【腾讯云 Cloud Studio 实战训练营】使用Cloud Studio构建SpringSecurity权限框架
  • c语言每日一练(4)
  • VB字符转换
  • 【C++进阶之路】map与set的基本使用
  • 代码随想录算法训练营day56
  • 通话降噪算法在手机和IOT设备上的应用和挑战
  • Pet Detection System (PDS)
  • 【OpenCV常用函数:颜色空间转换、阈值化】cv2.cvtColor()+cv2.threshold()
  • 一键登录和短信验证登录,到底有什么区别?
  • 史上最精简Android RecyclerView实现拖拽排序改变位置代码
  • centos 7 系统上重启 mysql 时报错 Failed to restart mysqld.service: Unit not found.
  • 时间复杂度空间复杂度相关练习题
  • Linux | Ubuntu18.04安装RTX 4060显卡驱动完整教程
  • Mermaid语法使用
  • [OnWork.Tools]系列 05-系统工具
  • SOME/IP学习笔记1
  • Effective Java笔记(26)请不要使用原生态类型
  • linux 内存 - KO内存占用
  • 2023.8.7论文阅读
  • 2023河南萌新联赛第(五)场:郑州轻工业大学 --Kruskal
  • Maven引入本地jar包
  • Java并发编程实战——结构化并发应用程序
  • uniapp echarts 点击失效
  • 手机开启应急预警通知 / 地震预警
  • 2020年12月 Python(一级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • 遇到无法复现的 Bug