Axure实现菜单抽屉效果

ops/2024/10/21 5:43:58/

Axure是怎么实现如下效果的?

实现效果

请添加图片描述

两级菜单,点击菜单收起其他菜单,打开当前菜单。

实现原理

  1. 单击一级菜单时,1)切换当下二季菜单的显示/隐藏状态 2)隐藏其他菜单的子菜单
  2. 推/拉动下方原件效果

实现步骤

  1. 在页面上添加一个矩形作为一级菜单

  2. 在一级菜单下面添加多个矩形作为当前一级菜单的二级菜单

  3. 将二级菜单进行组合,设置组合名称为G-sub table,转成动态面板,之后设置为隐藏

  4. 将一个菜单和二级菜单进行组合,多复制几个

  5. 按照倒叙将组合好的菜单叠放,如下:
    在这里插入图片描述
    注意:第三个菜单放最下面,第二个叠在三的上面,第一个在最上层。

  6. 分别给1、2、3这三个一级菜单添加点击动作(以菜单1为例)
    1)交互->单击时->显示/隐藏->隐藏其他菜单的子级动态面板,设置“拉动原件”,选择“下方”
    在这里插入图片描述
    2)将当前菜单的子菜单的组合设置为“切换”
    在这里插入图片描述

总的设置如下:
在这里插入图片描述

总结

实际上就是堆叠了几个动态面板,适当的时候让其显示或者隐藏,用时拉或者推送下方原件上移或者下移,即可实现此效果。


http://www.ppmy.cn/ops/37624.html

相关文章

Vue.js【路由】

初识路由 提到路由(Route),一般我们会联想到网络中常见的路由器(Router),那么路由和路由器之间有什么关联呢?路由是指路由器从一个接口接收到数据,根据数据的目的地址将数据定向传送…

嵌入式RTOS面试题目

用过哪些嵌入式操作系统?使⽤RTOS和裸机代码开发有什么区别(优缺点)? 之前的⼀个项⽬是采⽤裸机代码开发的,写起来还⾏,通过状态机来管理业务逻辑和各种外设。 但是随着外设的增加,任务之间的…

MapReduce的Shuffle过程

Shuffle是指从 Map 产生输出开始,包括系统执行排序以及传送Map输出到Reduce作为输入的过程. Shuffle 阶段可以分为 Map 端的 Shuffle 阶段和 Reduce 端的 Shuffle 阶段. Shuffle 阶段的工作过程,如图所示: Map 端的 Shuffle 阶段 1)每个输入分片会让一个 Map 任务…

短视频矩阵系统电脑端/手机版双端加盟saas技术源头开发

短视频矩阵系统是为了帮助用户更高效地管理、编辑、发布和分析短视频内容而设计的综合性平台。这种系统通常包含电脑端和手机端两个部分,每个部分都有其特定的功能模型,以适应不同设备的操作习惯和使用场景。以下是根据搜索结果中提供的信息,…

selenium4.x 之POM概况

Page Object Mpde 一、基类 basePage import logging import time from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.wait import WebDriverWait logger logging.getLogger("PO")class BasePage:&…

linux高性能服务器-线程池实现

文章目录 定义应用场景任务类型线程数量数据结构设计:任务设计:队列设计:线程池设计 接口设计 定义 线程池属于生产消费模型,管理维持固定数量线程的池式结构,避免线程频繁的创建和销毁 应用场景 当一类任务耗时&am…

【C++随记4】C++二进制位操作运算符

在C中,二进制位操作运算符允许你直接对整数类型的变量的位进行操作。这些运算符包括: 按位与(Bitwise AND): & 按位或(Bitwise OR): | 按位异或(Bitwise XOR): ^ 按位取反&…

docker 方式 elasticsearch 8.13 简单例子

安装 docker 虚拟机安装 elastic search 安装本地 # 创建 elastic 的网络 docker network create elastic # 用镜像的方式创建并启动容器 docker run -d --name es --net elastic -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e "xpack.secur…