AXURE 9:如何通过内联框架，实现菜单动态伸缩
ccwgpt 2024-10-21 04:03 129 浏览 0 评论
编辑导读：产品中的菜单伸缩是非常常见的功能，如何通过内联框架， 实现菜单动态伸缩呢？本文作者用AXURE进行了演示，一起来看看吧。
一、制作原型
拉入四个矩形框型，作为一组主菜单与子菜单，画出两组菜单。
主菜单命名为菜单一，下面三个子菜单分别命名为子菜单一，子菜单二，子菜单三。子菜单左侧对齐并垂直分布，子菜单组与主菜单居中分布，子菜单合并成组命名为菜单一子菜单；同样的方式画出菜单二，将其子菜单合并成组命名为菜单二子菜单。
将子菜单和主菜单合并成组；各个菜单组对齐处理。对菜单进行样式设计，我这里把主菜单设为蓝色填充，白色字体。
对子菜单进行样式设计，选中子菜单，右击，选择交互样式，鼠标悬停，鼠标按下，选中的时候子菜单填充浅蓝色。
将子菜单组设置为隐藏。主菜单按照展示的样式进行排列。
接下来从元件中拖拽内联框架，拖到合适大小，并将边框进行隐藏。
二、添加交互
点击主菜单一，添加交互，新建交互，选择（Click or Tap），显示与隐藏，目标选中子菜单组合，显示动画，向下滑动500ms，隐藏动画，向上滑动500ms，更多选项，选择推动和拉动原件，下方，线性500ms。
子菜单1设置交互，新建交互，选择（Click or Tap），框架中打开链接，目标选择内联框架，链接到子菜单1对应的详细原型页面。
按照同样的方式设置其他的子菜单。（子菜单链接的具体页面根据业务需要来，可以提前画几个菜单页面）。
按照同样的方式设计其他菜单和相应的界面。最后形成的结果如图。
本文由 @汪仔2268 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
相关推荐
- 丨公司丨公司大架构整理汇总
-
注：本文转自团队成员原创作品，特此鸣谢（公号：法海图鉴）今日话题公司大架构整理背景介绍经过前几期话题对各种企业类型的介绍，想必大家已经有了初步认识。之后我将带着大家开启对公司的深入了解。本期...
- 图解物理--八年级物理下册最全知识框架导图
-
第七章力1力2弹力3重力第八章运动和力1牛顿第一定律2二力平衡3摩擦力第九章压强1压强2液体压强3大气压强4流体压强与流速的关系第十章浮力1浮力2阿基米德原理3物体的浮沉条件及应用第十一章功...
- 八年级上册生物，思维导图，期末高分必备资料，家长收藏
-
这是八年级上册生物的思维导图，孩子在背诵知识点的时候，可以看一下知识点在导图中的位置，形成对知识点整体的把握，有助于学生拿高分，特别是图片中带红色星星的部分，更是要注意背诵，是重点内容。家长可以把图片...
- 2019政府工作报告精华，这张思维导图里全都有
-
每经记者：李可愚每经编辑：陈星每日经济新闻
- 图解薪酬体系结构设计
-
...
- 司考复习独家总结!一张图总结行政法知识结构体系
-
作为三大实体法之一，行政法的分值在60分左右，行政法在司法考试中一直比较平稳常规，没有偏题怪题，还是比较容易得分的。小编要提醒大家，在3月之前要把三大实体法学习一遍。下图是厚大在线360导学师小周总结...
- 实用干货!高中物理框架图，让零碎知识“串联”起来
-
高中物理学习一定要抓好逻辑结构大框架！了解整个知识框架体系后，更易抓住骨干知识，干掉重难知识点~今天给大家分享高中物理的框架图同学们赶紧收藏起来吧！力学知识结构图光学知识结构图热学、原子物理知识结构图...
- 254m超高层办公楼型钢砼框架-核心筒结构图
-
高度类别：超高层建筑钢筋混凝土结构：框架,框架核心筒钢结构：钢框架建筑功能：办公包含：办公楼57层（-3层）254.150m钻孔灌注桩桩+筏板型钢混凝土框架-钢筋混凝土核心筒西裙房2层（-...
- 砖混结构与框架结构，究竟有何区别?千万别被坑!
-
现在买房装修的人最怕啥？不是价格高，而是房子不安全！两种主流建筑结构，砖混靠墙，框架靠柱子，选错了隔墙都可能要命。简单说，砖混便宜但别碰高层，框架贵点但能保命。砖混那些承重墙根本不能拆，想砸墙改个开放...
- 大师一百——高中化学必考:《元素周期律》考点框架图
-
今天大师给大家带来的是高中化学的《元素周期律》考点框架图，高中的同学必须牢记于心，这种重要的考点，考试是一定会考的！化学大师...
- 需求分析框架图
-
需求分析框架图
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- orm框架有哪些 (51)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)