Axure树形菜单展开与折叠

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:Axure树形菜单展开与折叠

主要内容:树形菜单制作——层级关系——隐藏与显示——值的变化——多层交互

应用场景:关系树、菜单后台维护、角色关系

案例展示:

Axure树形菜单展开与折叠


正文内容:

步骤一:建立菜单表头,拖入矩形并进行命名

步骤二:依次录入一级类目、二级类目、三级类目、商品名单,组成整体信息内容

步骤三,除了一级类目,全部设置成载入时隐藏

步骤五:添加一级类目下蔬菜的交互;单击蔬菜按钮——显示二级类目——设置选中效果;(其他一级类目同理设计,因篇幅关系不上图了)

步骤六:添加点击三个点弹出更多选项;制作弹窗的背景——填加选项

步骤七:依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项

1、叶菜交互

2、瓜菜的交互

因为我们三级类目是上下布局,这时我们应把两个菜单进行叠加

以上同理设计三级类目和商品名称,因为篇幅关系,不重复操作了,感谢观看。

本课小结:隐藏与显示的深度理解,选中时与取消选中时元件的变化以及用户体验的设计;多元件的状态思考。


相关课程直通车:

 中继器实现时间读取和修改-CSDN博客

Axure复选框全选反选取消高级交互-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

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

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

相关文章

Python学习的自我理解和想法(15)

学的是b站的课程(千锋教育),跟老师写程序,不是自创的代码! 今天是学Python的第15天,从今天开始,每天一到两个常用模块,更完恢复到原来的,开学了,时间不多&am…

Java 直接获取 pom.xml 配置的属性值

Java 直接获取 pom.xml 配置的属性值 1.需求描述2.代码示例3.结果演示 系统:Win10 JDK:1.8.0_351 IDEA:2022.3.3 1.需求描述 在开发一个 SpringBoot 项目的时候,需要从 pom.xml 中获取配置的 artifactId,name&#xf…

vscode配置ssh远程连接服务器

注意:重启软件或重启电脑,解决很多问题 一. vscode配置ssh vscode通过ssh连接服务器(吐血总结)_vscode ssh-CSDN博客 二. VScode无法远程连接主机问题 VSCode远程连接服务器报错:Could not establish connection to…

HCIP-HarmonyOS Application Developer 习题(十六)

(判断)1、HiLink通过分布式软总线的方式连接所有设备,强能力设备可对弱能力设备进行设备虚拟化,将弱设备当做本机设备直接调用。 答案:错误 分析:HiLink 主要针对的是应用开发者与第三方设备开发者&#xf…

力扣 中等 143.重排链表

文章目录 题目介绍题解 题目介绍 题解 class Solution {public void reorderList(ListNode head) {ListNode mid middleNode(head);ListNode head2 reverseList(mid);while (head2.next ! null) {ListNode nxt head.next;ListNode nxt2 head2.next;head.next head2;head2.…

Linux-正则表达式

正则表达式 定义DRE模式-纯文本/特殊字符 定义DRE模式-锚字符/点号字符 定义DRE模式-字符组/排除型字符组 定义DRE模式-区间 定义DRE模式-特殊字符组 定义DRE模式-星号 扩展正则表达式-问号 扩展正则表达式-加号 扩展正则表达式-使用花括号 扩展正则表达式-管道符号/表达式分组…

如何通过CDN优化网站服务器访问速度?

CDN,即内容分发网络(Content Delivery Network),在现代互联网中起着重要作用。它可以显著提升网站服务器的访问速度。以下是CDN在加速网站访问方面的主要优势及其工作原理。 1. 全球分布的服务器节点 CDN通过在全球范围内布设多个…

【Router】路由器中NAT、NAPT、NPT是什么?

参考链接 NAT vs. NAPT: What’s the Difference? IPv6 Network Prefix Translation (NPt) | pfSense Documentation (netgate.com) 趣谈NAT/NAPT的原理,这篇不可不读! - 知乎 (zhihu.com) NAT (Network Address Translation) NAT说明 NAT&#x…

成都睿明智科技有限公司电商服务可靠不?

在这个短视频风起云涌的时代,抖音不仅成为了人们娱乐消遣的首选平台,更是众多商家竞相追逐的电商新蓝海。成都睿明智科技有限公司,作为抖音电商服务领域的佼佼者,正以其独到的洞察力和专业的服务,助力无数品牌在这片沃…

微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具

微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具 背景介绍 一直都是本地电脑运行微信开发者工具打包上传。多项目中新老版本对node版本要求不一致,老是切来切去。而且同一个人开发上传需要打包…

pandas-使用技巧

pandas-使用技巧 简单技巧 仅个人笔记使用,感谢点赞关注 简单技巧 pd.to_dict():Dataframe格式数据转字典数据pd.dropna():去nan值& | ~:pd逻辑运算符pd.isnan():判断是否为nan值pd.concat:多个pd拼接…

李宏毅机器学习2022-HW7-BERT-Question Answering

文章目录 TaskBaselineMediumStrongBoss Code Link Task HW7的任务是通过BERT完成Question Answering。 数据预处理流程梳理 数据解压后包含3个json文件:hw7_train.json, hw7_dev.json, hw7_test.json。 DRCD: 台達閱讀理解資料集 Delta Reading Comprehension …

openpnp - 底部相机视觉识别CvPipeLine的参数bug修正

文章目录 openpnp - 底部相机视觉识别的CvPipeLine的参数bug概述笔记openpnp的视觉识别参数的错误原因备注END openpnp - 底部相机视觉识别的CvPipeLine的参数bug 概述 底部相机抓起一个SOD323的元件,进行视觉识别。 识别出的矩形错了,是一个很长的长方…

Qt_软件添加版本信息

文章内容: 给生成的软件添加软件的版权等信息 #include <windows.h> //中文的话增加下面这一行 #pragma code_page(65001)VS_VERSION_INFO VERSIONINFO

TEI text-embeddings-inference文本嵌入模型推理框架

参看: https://github.com/huggingface/text-embeddings-inference#docker 文本嵌入模型榜单 https://huggingface.co/spaces/mteb/leaderboard bge模型下载 https://huggingface.co/BAAI/bge-m3/tree/main export HF_ENDPOINT=https://hf-mirror.comhuggingface-cli dow…

STM32-HAL库 - MAX30102心率血氧传感器 —— 2024.10.15

一、教程简介 本教程使用CubeMX配合Keil5编写代码&#xff0c;带你10分钟拿下MAX30102。在官方例程的基础上进行移植和封装&#xff0c;测量数据准确。采用模拟I2C&#xff0c;任意三个引脚均可驱动。 二、MAX30102简介 MAX30102是一个集成的脉搏血氧仪和心率监测仪生物传感器…

Tortoise SVN 安装汉化教程(乌龟SVN)

1.首先下载 去官网下载 如果下载比较慢的&#xff0c;链接自取 https://pan.quark.cn/s/cb6f2eee3f90 2. 安装Tortoise SVN 无脑next到完成 最后到桌面右键 你就发现svn出来了&#xff0c;但是是英文的&#xff01;&#xff01;&#xff01;&#xff01; 像我这种英文不好的…

流体力学笔记

目录 1、名词2、湍流与涡流3 涡激振动4 压力面与吸力面参考&#xff1a;[空气动力学的“他山之石”](https://zhuanlan.zhihu.com/p/412542513) 1、名词 转列&#xff1a;transition 涡脱落&#xff1a;vortex shedding 涡分离&#xff1a;vortex rupture 气动噪声&#xff1a…

【java Web如何开发?】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

rel,npt时间服务器

服务器端配置 配置文件/etc/chrony.conf 开放端口 查看123端口是否开放 关闭防火墙 客户端配置 配置文件/etc/chrony.conf 重启文件和查看是否成功 注意事项要在ping通下实现&#xff0c;要是能ping通配置好了还是不行可以查看防火墙是否关闭