Axure高级交互设计：垂直菜单展开与折叠（100%成功）

已于 2025-05-18 19:32:34 修改
阅读量1.6k 收藏 10
点赞数 27
分类专栏： Axure高级交互设计 Axure应用交互设计 文章标签： axure 菜单展开与折叠 垂直菜单 垂直菜单展开与收回
于 2024-10-18 14:27:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/benleiqiang/article/details/143032707
版权

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

 Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420

课程主题：Axure垂直菜单展开与折叠

主要内容：垂直菜单单击实现展开/折叠，悬停效果

应用场景：后台菜单设计

案例展示：

案例视频：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Axure RP9.0 教程：左侧菜单列表导航 ( 点击父级菜单，子菜单自动收缩或展开)【响应式的菜单导航】
专注于计算机研发知识和资讯分享
03-25 463
1. 设置目标原件时，选择切换，这样就可以实现，当原件展示时，点击自动隐藏，隐藏时自动显示； 2. 展开/收起原件（推动/拉动原件）设置为方向**向下**
Axure高级交互设计：树形菜单展开与折叠
benleiqiang的博客
10-18 1442
步骤五：添加一级类目下蔬菜的交互；单击蔬菜按钮——显示二级类目——设置选中效果；步骤二：依次录入一级类目、二级类目、三级类目、商品名单，组成整体信息内容。步骤七：依次为叶菜、瓜菜二级、三级、商品名称添加如上按钮的交互和更多选项。步骤三，除了一级类目，全部设置成载入时隐藏。如有其他相关问题，欢迎私信沟通，关注。
AXURE-超详细折叠菜单实现
热门推荐
Kol_mogorov的博客
04-20 1万+
这个折叠菜单简把我弄崩了，苍天呀，这里记录一下，希望后来的人少入点坑所用版本为最新的Axure 8.0,我还不怎么会用动态面板呢，难死宝宝了1.最终效果图       变成      再变成          实现步骤1         1，首先建立一个动态面板，左边的元件区拖出来就可以了（这个地方先不要改动态面板的属性：自动调整为内容尺寸，一会在改，将改动态面板取名为1。         2.进...
Axure教程—折叠面板
weixin_43516258的博客
06-24 3968
本文介绍利用Axure中的动态面板制作折叠面板
Axure难点解决分享：垂直菜单折叠与展开（玩转垂直菜单）
benleiqiang的博客
04-08 414
关于垂直菜单的折叠与展开交互，是产品经理入门是一个非常常见的问题，很多人会出现“展不开子菜单”、“拉不回子菜单”、“展开错位”、“拉回错位”等等这些问题，那么发现问题，我们就要找问题的原因，单纯告诉大家怎么做，以后还会犯类似的错误。那么折叠与展开的归因是大家对“交互触发”理解不深刻，什么时候触发我们设计好的交互，在哪种场景下需要触发，有的人看到这就划过去了，我负责任的说，以后你一定会遇到使用文本框计数的场景，那时候还要回来补课的。
Axure实现水平菜单、垂直菜单、抽屉式菜单
聪哥
09-16 8457
通过Axure实现水平菜单、垂直菜单、抽屉式菜单的界面展示。
Axure 2、3层级菜单展开折叠Demo.rp
02-21
使用Axure做的 2、3层级菜单展开折叠Demo rp 源文件。 点击一级菜单展开二级菜单，点击二级菜单展开三级菜单。 用户可直接下载使用。
Axure侧滑菜单栏
11-16
效果实现教程地址：https://blog.csdn.net/qq_27884377/article/details/84138648
Axure RP9制作三级菜单实现展开收起（保姆级教程）
qq_73566291的博客
08-28 5426
保姆级让你学会三级菜单制作！超详细！不信来看看
Axure疑难杂症：垂直菜单折叠与展开（玩转垂直菜单）
最新发布
benleiqiang的博客
05-15 42
初学者常见的问题，如菜单展不开或拉不回等，并指出这些问题的根源在于对“交互触发”理解不深刻。课程通过具体步骤演示了如何设计垂直菜单的折叠与展开效果，包括元件的命名、交互逻辑的设置等。
Axure实现随意折叠和展开
06-11
Axure实现随意折叠和展开，类似jQuery 效果 - 淡入淡出等等
Axure左边菜单，右边显示内容案例
03-29
Axure8.0制作选择左边菜单栏，右边显示相关内容案例，相关详细图文操作，可以参考博客内容：http://blog.csdn.net/ffacffac/article/details/67639914
Axure -下拉菜单制作
06-23
Axure -下拉菜单制作.rp http://blog.csdn.net/a215318036/article/details/7685729
一款多风格漂亮的垂直折叠菜单
10-12
一款多风格漂亮的垂直折叠菜单一款多风格漂亮的垂直折叠菜单一款多风格漂亮的垂直折叠菜单
Axure垂直菜单折叠与展开
05-11
很多初学axure的同学对于垂直菜单的折叠与展开的设计都存在问题，从归因上来说，是对隐藏与显示交互的认识不深刻，可以针对性的去理解显隐交互，不要有学习压力，理解了才可以举一反三
Axure使用——创建折叠菜单
yingzizizizizizzz的专栏
05-02 9074
最近做一个项目需要画原型，做了一个下午做好了，现在分享下。 步骤如下： 1.先添加动态面板 2.往动态面板中添加矩形 3.接着先隐藏下面的矩形（也就是你要折叠起来的内容） 4.一定要注意： 5.添加动态面板的状态 6.把之前做的那个矩形全部复制到state1中 7.把之前做的那个矩形全部复制到state2中，将下面的矩形隐藏去掉 8.为st
Axure折叠与展开效果的实现
12-30 1万+
http://www.masterchat.cn/article/20120501/217.html 视频教程 项目效果 点击表头，内容会展开或者收缩。 第一步，用矩形工具分别建立如下效果的图形 2，将内容部分(Section下边)转换成动态面板，分别命名为content-section1，content-section2，content-section3，分别为每个Section添加on
Axure实现导航栏的展开与收缩
LAO__LIN的博客
04-12 2401
使用场景一般是B端后台系统需要以导航栏的展开与收缩实现原型的动态交互，主要使用区域是左边或者顶部的导航栏展开与收缩，同一级导航下的小标题，放在一起既美观又节省时间。
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
发出的红包

打赏作者

结构化知识课堂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值