如何在Axure中做面板折叠/多级菜单折叠效果？

最新推荐文章于 2024-05-15 14:58:07 发布
最新推荐文章于 2024-05-15 14:58:07 发布
阅读量6.7k 收藏 14
点赞数 3
分类专栏： Axure 文章标签： axure 产品经理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panjing_0520/article/details/122130170
版权

工具：Axure RP 9

概论：使用动态面板，用交互效果切换面板状态，实现菜单折叠/展开的效果

最终实现效果：展开和收回

                 

 step1：在元件库中拖入矩形框&#x

最低0.47元/天 解锁文章
懂财务的码农
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Axure RP9 PC端左侧折叠菜单栏切换效果实现
qq_29459903的博客
10-20 4759
1.用动态面板制作“一级菜单” 如上图所示，从左侧元件库中拖一个矩形到画布中进行创作一个菜单的按钮。然后根据自己的需求调整按钮的尺寸（如：标示3），再调节按钮的其它颜色、描边等。 根据自己的需要，还可以丰富按钮的样式，我这里为按钮添加了图标和展开的小箭头图标（图标可以到阿里图标库自己去下载），选中按钮的所有元件，Ctrl+G编个组 做好“一级菜单1”后，按住Ctrl键，拖拽向下复制（或者Ctrl+c）一个“子菜单1”（把子菜单提出来，不是组合状态哦）。我们去掉二级菜单的一些图标样式，...
AXURE-超详细折叠菜单实现
Kol_mogorov的博客
04-20 1万+
这个折叠菜单简把我弄崩了，苍天呀，这里记录一下，希望后来的人少入点坑所用版本为最新的Axure 8.0,我还不怎么会用动态面板呢，难死宝宝了1.最终效果图       变成      再变成          实现步骤1         1，首先建立一个动态面板，左边的元件区拖出来就可以了（这个地方先不要改动态面板的属性：自动调整为内容尺寸，一会在改，将改动态面板取名为1。         2.进...
Axure设计-折叠菜单（中继器 ）
06-02
Axure设计—折叠菜单（中继器 ）；Axure设计—折叠菜单（中继器 ）；Axure设计—折叠菜单（中继器 ）；Axure设计—折叠菜单（中继器 ）；Axure设计—折叠菜单（中继器 ）；Axure设计—折叠菜单（中继器 ）Axure设计—折叠菜单（中继器 ）
Axure使用教程（二）、动态面板
热门推荐
c11073138的博客
04-06 2万+
动态面板可以设置多个状态，可以通过设置动态面板在不同状态间切换来实现复杂功能。比如弹出框、下拉菜单、轮播等。 一、如何创建、编辑、取消动态面板 1、从左侧部件库中拖进一个动态面板来。 2、双击动态面板，可以编辑动态面板。 如下图，出现动态面板弹出框，可以命名动态面板名称。另外选中State，点击可修改状态名称，双击可进入State编辑状态。 如果需要新增状态，点击下图中的加号。 3...
axureR9 制作左侧菜单弹出收起效果
最新发布
mumuyouxi的博客
05-15 219
单击时>显示/隐藏动态面板>切换>向下滑动>更多选项>推拉原件>下方>效果选择线性>点击完成。第三步：拖拉一个动态面板>动态面板里面拖拉button作二级菜单>动态面板隐藏。第五步：再拖拉一个button做一级菜单，和原先的一级菜单并排。第四步：点击一级菜单button，设置交互【第二步：拖拉1个button作一级菜单。第一步：打开axure,创建1个页面。
Axure 2、3层级菜单展开折叠Demo.rp
02-21
使用Axure做的 2、3层级菜单展开折叠Demo rp 源文件。 点击一级菜单展开二级菜单，点击二级菜单展开三级菜单。 用户可直接下载使用。
Axure 导航折叠菜单实例
m0_62866824的博客
01-25 1284
一、说明 （1）下拉折叠菜单多为后台的菜单栏，点击一级菜单展示其子菜单，不只是代码才能够实现，axure也是可以做出这种效果的，下面让我来教大家走一遍吧！ 二、步骤 （1）先拉一个矩形跟一个水平菜单（这里命名随意主要是为了看效果） ...
Axure RP9 - 实现菜单下拉及折叠效果
wjs2580219863的博客
05-09 1万+
话不多说，直接上手： 1，拖入三个动态模板，分别命名1,2,3。 2，双击打开任意一个动态模板，我以1为例，添加一个模板状态，打开这个状态，加入原菜单以及新的二级菜单。 3，对状态2模板中一级菜单添加点击事件，点击设置当前面板状态为state1，并在动作中勾选推动/拉动原件。 4，退出动态模板，对该模板添加点击事件，点击设置动态模板状态为state2，同上，记得勾选推动/拉动原件，这样一个折叠菜单就配置完成了。 5，效果如下，点击弹出二级菜单，再点击收回，另外两个菜单配置同理.
Axure折叠与展开效果的实现
12-30 1万+
http://www.masterchat.cn/article/20120501/217.html 视频教程 项目效果 点击表头，内容会展开或者收缩。 第一步，用矩形工具分别建立如下效果的图形 2，将内容部分(Section下边)转换成动态面板，分别命名为content-section1，content-section2，content-section3，分别为每个Section添加on
Axure实现随意折叠和展开
06-11
Axure实现随意折叠和展开，类似jQuery 效果 - 淡入淡出等等
Axure案例-折叠面板
03-20
Axure案例—折叠面板;Axure案例—折叠面板;Axure案例—折叠面板Axure案例—折叠面板;Axure案例—折叠面板;Axure案例—折叠面板;Axure案例—折叠面板;Axure案例—折叠面板;Axure案例—折叠面板
Axure三级目录展开与收起
06-10
内容概要：Axure三级目录展开与收起资源文件 适用人群：产品经理 使用场景及目标：适用于工程项目类或办公类产品设计
AXURE组件-web折叠菜单交互.rp
08-04
AXURE组件-web折叠菜单交互.rp
axure9点击标题进行面板折叠推拉
05-12
axure9点击标题进行面板折叠推拉axure9点击标题进行面板折叠推拉axure9点击标题进行面板折叠推拉axure9点击标题进行面板折叠推拉axure9点击标题进行面板折叠推拉axure9点击标题进行面板折叠推拉axure9点击标题进行...
Axure教程—折叠面板
weixin_43516258的博客
06-24 2373
本文介绍利用Axure中的动态面板制作折叠面板
Axure 折叠面板（手风琴）动态交互效果制作
weixin_44933101的博客
08-01 2402
什么是折叠面板？ 折叠面板可能是响应式设计中的最重要主力。这是一个非常有用的逐步呈现的模型——突出显示每个部分的重要细节，必要时利用点击来显示更多详细信息。因此，设计始终集中在最先显示的关键信息上，以便其他一切都易于访问。......
Axure RP9制作三级菜单实现展开收起（保姆级教程）
qq_73566291的博客
08-28 2729
保姆级让你学会三级菜单制作！超详细！不信来看看
blog20200919：02-Axure使用动态面板实现三级菜单
weixin_42013872的博客
09-19 706
首先，菜单分为三级。 在三级菜单展开之前，先把外层动态面板隐藏并拉动元件。 这样，所有二级菜单会变成收起状态。 然后，让三级菜单展开。 这时，外层动态面板自动适应展开后的尺寸（注意外层动态面板要设置自动适应内容尺寸），高度变长。 最后，再把外层动态面板显示出来，这样就会按照展开之后的高度推动下方元件。 第一步，我们先放入菜单的相关元件，这里我使用了一些占位符，大家也可以使用矩形，设置成其他样式。 第二步，我们把三级菜单的三个元件全选，在上面点击鼠标右键，选择【转换为动态面板】的选项；然后，
【uniapp】自定义多级折叠面板
Qxn530的博客
09-29 7344
自定义侧边栏、折叠面板的基础实现
axure三级菜单展开折叠
06-28
### 回答1： Axure是一款流行的原型设计工具，用来设计网站和应用程序。三级菜单展开折叠是Axure中常用的一种交互功能，它可以使用户更方便地浏览菜单和内容。具体实现方法如下： 1. 定义三级菜单的状态：默认状态下，只展示一、二级菜单；点击一级菜单后，展开二级菜单；再点击二级菜单，展开三级菜单。通过点击三级菜单，折叠二级和三级菜单，回到一级菜单状态。 2. 在Axure中，通过使用“面板”控件来模拟三级菜单的展开折叠。在面板上可以放置图标、文本、按钮等控件，用于呈现菜单内容。 3. 设计交互逻辑：通过“条件、动作”等交互设计功能，设置点击事件触发面板的展开和收起。例如，点击一级菜单时展开二级菜单，点击已展开的二级菜单时展开三级菜单，点击已展开的三级菜单时折叠三级和二级菜单，回到一级菜单状态。 4. 为了更好的用户体验，可以添加一些动画效果和颜色变化来提示用户当前菜单的状态，例如，点击一级菜单，区分已展开和未展开的二级菜单，已展开和未展开的三级菜单。 总之，Axure三级菜单展开折叠功能较为简单，需要设计师结合实际需求，灵活运用Axure中的交互设计工具来完成。 ### 回答2： Axure是一款流行的原型设计工具，可以使用其来设计和创建具有丰富交互性的原型应用。其中，三级菜单展开折叠是在进行界面设计中常见的一种交互操作。 在Axure中，实现三级菜单展开折叠的方法有多种。下面以一种简单易懂的方式来介绍。 首先，需要在Axure的页面上添加一个Dynamic Panel，即动态面板，作为菜单的容器。然后，将菜单项（例如“一级菜单”、“二级菜单”、“三级菜单”等）添加到控件库中。 接着，我们需要设置菜单项之间的关系。对于一级菜单，可以直接将其添加到动态面板中。对于二级菜单，需要将其作为一级菜单的子菜单，也就是在一级菜单下方添加一个Dynamic Panel，并将二级菜单项添加到这个面板中。对于三级菜单同样如此，将其作为二级菜单的子菜单。 接下来需要设置触发菜单折叠和展开的交互事件。这里采用点击事件来触发折叠和展开。对于一级菜单，设置点击事件来触发下方的二级菜单展开或折叠。对于二级菜单，设置点击事件触发其下方的三级菜单展开或折叠。 最后，需要设置菜单折叠和展开的交互动效。可以通过设置动画效果来使菜单的折叠和展开更具有视觉效果。 以上就是一个简单的Axure三级菜单展开折叠的实现方法。当然，还有其他方法可以实现此种交互效果，但无论哪一种方法，都是通过控件的层级关系，以及设置交互事件和动效来实现的。希望能对你在Axure中设计交互界面时有所帮助。 ### 回答3： Axure RP是一个专业的快速原型制作工具，在使用中，经常需要用到三级菜单来展示内容。而三级菜单的展开折叠功能是非常重要的，能够提高用户的交互体验。下面我将介绍如何使用Axure RP制作三级菜单的展开折叠功能。 首先，我们需要在页面上添加菜单栏和菜单项，设置好每个菜单项的页面链接或动作。 其次，我们需要在每个菜单项上添加事件，包括点击事件和鼠标悬停事件。 点击事件：通过点击菜单项，展开下一级菜单。对于下一级菜单，我们可以通过显示或隐藏组件的方式来实现。具体操作是：在Axure RP的交互面板中添加一个“显示/隐藏”事件，将其绑定到下一级菜单的组件上，根据需要选择“显示”或“隐藏”，并设置动画效果。 鼠标悬停事件：在鼠标悬停在菜单项上时，展示下一级菜单。对于下一级菜单的显示，我们可以通过改变组件的透明度或添加效果的方式来实现。具体操作是：在Axure RP的交互面板中添加一个“改变风格”事件，将其绑定到下一级菜单的组件上，选择“设置不透明度”或“添加效果”，并设置动画效果。 最后，我们需要设置每个菜单项和下一级菜单的交互条件，以便实现展开折叠功能。具体操作是：在Axure RP的条件面板中添加一个“变量”条件，将其绑定到菜单项或下一级菜单的组件上，根据需要设置变量的初始状态和变化条件，例如：当菜单项被点击时，变量的值从“0”变为“1”，下一级菜单的组件显示出来；当下一级菜单被点击或鼠标离开时，变量的值从“1”变为“0”，下一级菜单的组件隐藏起来。 通过以上步骤，我们就可以完成Axure RP中三级菜单的展开折叠功能的制作。这样的交互设计可以让用户更加方便地查看和操作内容，提高用户体验，为产品的成功发展打下坚实的基础。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值