axure制作菜单下拉、隐藏、点击选中效果

在高保真原型中,制作导航栏菜单时,需要达到点击下拉按钮,子菜单自动弹出,点击其中一个子菜单项可栏目变为选中状态且跳转到对应的子页面。制作材料可以从antdesign中去下载,以下述网络配置菜单为例。在箭头处添加互动效果,为方便起见,先将路由列表,网关配置,向导配置几个组件选中,命名为网络配置子菜单,如下图所示。
在这里插入图片描述

在这里插入图片描述
按照上述设置后,可以进行上下伸缩菜单,下面开始添加鼠标悬浮在子菜单上时的效果,以及被选中时展示深色的效果。选中子菜单组件框,在interaction栏目中的style effect中选择mouseover,selected,这里颜色设置为深蓝色

在这里插入图片描述

再为组件设置点击事件,
在这里插入图片描述
将这个效果复制到每个子菜单里,做到这一步时,虽然能鼠标悬浮高亮,点击选中高亮,但会出现点击多个栏目后会同时高亮的情况,此时需要通过设置selection group的方式,让这几个组件只能同时一个被选中,右击组件—selection group,可以命名为主导航菜单选项组,将后续所有菜单里的组件都加到这个组件里。此时就能达到文章开头时说的效果了,但美中不足的是,打开页面时默认所有子菜单都是展开的,需要通过设置一个动画将其默认收起。点击页面空白处,在OnPageLoad里设置Show Hide的效果,如下图所示。至此大功告成!
在这里插入图片描述

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

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

相关文章

RedHat8.4离线升级内核(漏洞编号CVE-2024-1086)

一、背景 针对Linux内核提取权限漏洞 (漏洞编号CVE-2024-1086),整理离线环境的修复方案。本文以离线修复方案为主进行说明,第八章对在线修复方案进行说明。 (一) 漏洞简介 近日,绿盟科技CERT监测网上有研究员公开披露了一个Lin…

SpringBoot Vue Bootstrap 旅游管理系统

SpringBoot Vue 旅游管理系统源码,附带环境安装,运行说明 源码地址 开发环境 jdk1.8,mysql8,nodejs16,navicat,idea 使用技术springboot mybatis vue bootstrap 部分功能截图预览

【SQLAlChemy】常见的数据类型有哪些,Column可选的参数有哪些呢?

常见数据类型与Column参数 常见类型 Integer:整数类型,对应数据库的 int 类型。Float:浮点数类型,对应数据库的 float 类型。它占用 32 位空间。Double:双精度浮点数类型,对应数据库的 double 类型&#…

【CS.PL】Lua 编程之道: 基础语法和数据类型 - 进度16%

2 初级阶段 —— 基础语法和数据类型 文章目录 2 初级阶段 —— 基础语法和数据类型2.0 关键字(keywords) 🔥2.1 注释与标识符2.1.1 注释2.1.2 标识符 2.2 变量与赋值2.2.1 所有变量默认是全局变量 ≠ local, 有一个例外2.2.2 local变量是局部变量, 以end作为边界2.…

创建节约机关怎样向媒体投稿报道宣传?

创建节约机关并向媒体投稿报道宣传是一项重要的工作,它不仅能够提升机关的形象,还能促进社会各界对节约型社会的认识和支持。 作为一名新晋信息宣传员,初入职场的我满腔热血,怀揣着用文字传递价值的理想,却在投稿的道路上屡遭波折。面对每月的宣传任务,我…

表 达式树

》》》可以借助 LINQPad工具 using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Linq.Expressions; using System.Text; using System.Threading.Tasks; using System.Transactions;namespace EFDemo {public cla…

vite工程化搭建vue项目之自动按需导入

背景 当我们在使用vue3组合式开发的时候&#xff0c;大多数情况下我们的代码可能是这样的 <script setup lang"ts"> import { ref, reactive, toRefs, onMounted, computed } from vue; defineProps({}); </script><template><div></di…

共模信号与差模信号

差模信号又称串模信号&#xff0c;指的是两根线之间的信号差值&#xff1b;而共模信号又称对地信号&#xff0c;指的是两根线分别对地的信号。 差模信号&#xff1a;大小相等&#xff0c;方向相反的信号。共模信号&#xff1a;大小相等&#xff0c;方向相同的信号。 对于两输…

python的np.array()函数

1、创建数组 2、 与矩阵相关的函数 3、与排序相关的函数 4、 一元计算函数 5、 多元计算函数 6、 与文件读写相关的函数 7、与数组形状、属性相关的函数 8、 常用计算函数 9、 数组选取:切片和索引 10、np.random相关函数 Numpy常用的20个函数 一…

京准电钟 | 对比GPS,北斗卫星授时的场景有哪些?

京准电钟 | 对比GPS&#xff0c;北斗卫星授时的场景有哪些&#xff1f; 京准电钟 | 对比GPS&#xff0c;北斗卫星授时的场景有哪些&#xff1f; 对比国外的GPS&#xff0c;我国北斗卫星授时由于其高精度和稳定性&#xff0c;在各个领域都有广泛的应用场景。 以下是一些单北斗卫…

为什么需要负样本

假如我们只有正样本&#xff0c;模型在最开始训练的时候都是错误的&#xff0c;随着模型的迭代&#xff0c;准确率逐渐从0到1&#xff0c;最终将所有的样本都判别成正样本&#xff0c;也就是都在线的上方。 但真实的场景中有正有负&#xff0c;例如我们要做一个猫狗分类器&…

WINUI——CommunityToolkit.Mvvm Messenger接收消息时报错:Cannot access a disposed object.

背景 WINUI开发时使用CommunityToolkit.Mvvm的Messemger让UI展示一些信息时出现错误&#xff1a; System.ObjectDisposedException:“Cannot access a disposed object. ObjectDisposed_ObjectName_Name” 详细见下述截图&#xff1a; 开发环境 WIN11 WINUI&#xff13; …

如何在3天内开发一个鸿蒙app

华为鸿蒙操作系统&#xff08;HarmonyOS&#xff09;自2.0版本正式上线以来&#xff0c;在短时间内就部署超过了2亿台设备&#xff0c;纵观全球操作系统的发展史&#xff0c;也是十分罕见的。与其他手机操作系统不同&#xff0c;HarmonyOS自诞生之日起&#xff0c;就是一款面向…

【C++取经之路】继承

目录 继承的概念及定义 单继承的格式 继承方式和访问限定符 继承后子类访问基类成员的权限 基类和派生类对象赋值转换 切片 继承中的作用域 引申&#xff1a;重载和隐藏的区别 派生类的默认成员函数 继承与友元 继承与静态成员 如何实现一个不能被继承的类 复杂的…

【Java】解决Java报错:IllegalStateException during HTTP Request

文章目录 引言一、IllegalStateException的定义与概述1. 什么是IllegalStateException&#xff1f;2. IllegalStateException在HTTP请求中的常见触发场景3. 示例代码 二、解决方案1. 确保响应只被提交一次2. 正确管理Servlet的生命周期3. 避免重复访问输入流和输出流4. 使用框架…

HTML静态网页成品作业(HTML+CSS)—— 名人霍金介绍网页(6个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有6个页面。 二、作品演示 三、代…

vscode切换Python解释器

在vscode上切换解析器解决方案&#xff1a; 1、确认自己已经安装了python环境 2、command shift p ,在这里切换即可&#xff0c;见下图&#xff1a; 3、如果状态栏也就是右下角不现实切换操作的话&#xff0c;打开设置&#xff1a;

【六】Linux安装部署Nginx web服务器--及编写服务器启动脚本

一、部署安装nginx 1、查看nginx是否安装依赖包 [rootlocalhost ~]# rpm -q zlib-devel pcre-devel package zlib-devel is not installed package pcre-devel is not installed 2、若没有则安装nginx 依赖包 [rootlocalhost ~]# yum -y install zlib-devel* pcre-dev…

01 Pytorch 基础

paddle不需要放数据到gpu&#xff01; 区别&#xff1a;1.batch_norlization 不同 2. 1.数据处理 1.取一个数据&#xff0c;以及计算大小 &#xff08;剩下的工作&#xff0c;取batch&#xff0c;pytorch会自动做好了&#xff09; 2.模型相关 如何得到结果 3.模型训练/模型…

6月13日 Qtday1

#include "mywidget.h" //腾讯会议的登录界面 MyWidget::MyWidget(QWidget *parent): QMainWindow(parent) {this->setFixedSize(468,830);//主窗口大小this->setStyleSheet("background-color:rgb(255,255,255)");//主窗口背景this->setWindowTi…